Vue

Vue知识点

• Vue搭建脚手架

vue init webpack xxx(文件名)

• 什么是vue的生命周期:
  每个vue实例再被创建时都要经过一系列的初始化过程 监听数据 加载数据 编译模板 挂载dom 销毁

• Vue的生命周期

  • beforeCreate:实例初始化 在new一个vue实例后,只有一些默认的生命周期和默认事件,其他东西还没创建,不能在这个阶段使用data和methods方法,因为还没有初始化,
  • created:实例初始化完成 data和methods方法已经初始化 最早调用可以在这个阶段
  • beforeMount:正在载入 这个阶段的时候内存中的模板已经编译好了,但是没有挂载到页面,此时的页面还是旧的
  • mounted:dom数据准备完毕 这个阶段vue初始化已经完成,我们想要操作页面的dom节点最早可在这个阶段
  • beforeUpdate:数据更新前 页面中的数据还是旧的,data中的数据是更新后的,页面还没有和最新的数据保持一致
  • updated:数据更新完成 页面中的数据和data的数据保持一致 都是最新的
  • actived:当组件被激活时（使用内置组件 keep-alive 来缓存实例，而不是频繁创建和销毁(开销大)）
  • deactive:组件失效时
  • beforeDestroy:组件销毁前 这个阶段data、methods、指令等都还是可用状态 还没有被真正的销毁
  • destroyed:组件销毁后 这个阶段data、methods、指令等都不可以使用 组件已经被销毁
  • errorCaptured:(2.6版本新增)错误监听钩子

• vue第一次加载页面触发哪些生命周期:
  beforeCreate created beforeMount mounted

• Vue v-if 和 v-show的区别:

  • 相同点:v-if 和 v-show都可以动态控制dom元素显示隐藏
  • 不同点:v-if是将dom添加或者删除，v-show是将dispaly的属性改为none，dom元素还存在HTML结构中

• vue中Computed 和 Watch的使用和区别:

  • Computed:适用于计算已存在的值并返回，只有当被计算的值发生改变时才会触发，具有缓存性
  • Watch:监听某一个值，当被监听的值发生变化时，执行对应的操作或回调，刷新页面或重新渲染时只不变也会执行
  • 区别:watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果

• vue中的$router 和 $route的区别:

  • $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象
  • $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法 返回上一个history也是使用$router.go方法

• Vue的响应式原理:
  当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化

  当obj的param被赋值的时候,执行set对应的方法；当obj的param被取值的时候，执行get对应的方法。

let obj = {}
Object.defineProperty(obj,"param",{
    set :function SelfSetter(newVal) {
        console.log("被赋值")
        this._param = newVal
    },
    get :function SelfGetter () {
        console.log("取值")
        return this._param
    }
})
obj.param = 'newparam'; //被赋值
console.log(obj.param); //取值  newparam

• 什么是vuex
  全局的状态管理器，比如在state里声明一个变量可以在任何组件获取并且修改，修改可以得到全局的响应。

  • State：vuex中的变量声明，全局组件的data，用于保存所有组件的公共数据
  • Getters：和computed一样，可以理解为计算属性。返回值会根据它的依赖值被缓存起来，只有当依赖值发生改变时才会被重新计算
  • Mutations：和methods一样，可以理解为函数方法。mutations对象中保存着更改数据的回调函数, 第一个参数是state, 第二参数是是自定义的参数。
  • Actions：actions 类似于 mutations，不同在于：1.actions提交的是mutations而不是直接变更状态 2.actions中可以包含异步操作, mutations中绝对不允许出现异步 3.actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象

• vue-router 是什么?它有哪些组件
  vue的路由 router-link router-view

• active-class 是哪个组件的属性
  vue-router 当routerlink标签被点击时将会应用这个样式

• 怎么定义 vue-router 的动态路由? 怎么获取传过来的值
  path:/user/:id
$route.params.id

• vue-router 有哪几种导航钩子

  每个守卫方法接收三个参数:

  to: Route: 即将要进入的目标 路由对象
  from: Route: 当前导航正要离开的路由
  next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。(确保要调用 next 方法，否则钩子就不会被 resolved)

  next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
  next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
  next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
  next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调

  全局守卫beforeResolve

  const router = new VueRouter({ ... })
  router.beforeResolve((to,from,next) => {
      next()
  })
  

  前置守卫beforeEach

  const router = new VueRouter({ ... })
  router.beforeEach((to, from, next) => {
      // ...
      next()
  })
  

  后置守卫afterEach(不需要next())

  const router = new VueRouter({ ... })
  router.afterEach((to, from) => {
      // ...
  })
  

  路由独享的守卫

  const router = new VueRouter({
      routes: [
          {
              path: '/index',
              component: index,
              beforeEnter: (to, from, next) => {
                  // ...
                  next()
              }
          }
      ]
  })
  

  组件内的守卫

  • beforeRouteEnter 在渲染该组件的对应路由被 confirm 前调用

  • beforeRouteUpdate 在当前路由改变，但是依然渲染该组件是调用

  • beforeRouteLeave 导航离开该组件的对应路由时被调用

    <template>
    ...
    </template>
    export default{
        data(){
            return{
    
            }
        },
        beforeRouteEnter (to, from, next) {
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 this
            // 因为当守卫执行前，组件实例还没被创建
        },
        beforeRouteUpdate (to, from, next) {
            // 在当前路由改变，但是该组件被复用时调用
            // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
            // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
            // 可以访问组件实例 `this`
        },
        beforeRouteLeave (to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
        }
    }
    

  beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

  beforeRouteEnter (to, from, next) {  
      next(vm => {  
          // 通过 `vm` 访问组件实例
      })  
  }  
  

  注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。

  beforeRouteUpdate (to, from, next) {
      console.log(this)
      this.name = to.params.name
      next()
  }
  

  这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

  beforeRouteLeave (to, from , next) {
      const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
      if (answer) {
          next()
      } else {
          next(false)
      }
  }
  

  完整的导航解析流程:

  • 1.导航被触发。
  • 2.在失活的组件里调用离开守卫。
  • 3.调用全局的 beforeEach 守卫。
  • 4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  • 5.在路由配置里调用 beforeEnter。
  • 6.解析异步路由组件。
  • 7.在被激活的组件里调用 beforeRouteEnter。
  • 8.调用全局的 beforeResolve 守卫 (2.5+)。
  • 9.导航被确认。
  • 10.调用全局的 afterEach 钩子。
  • 11.触发 DOM 更新。
  • 12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

• $nextTick的使用:
  vue响应式的改变一个值以后，此时的dom并不会立即更新，如果需要在数据改变以后立即通过dom做一些操作，可以使用$nextTick获得更新后的dom

• delete和Vue.delete删除数组的区别:
  delete删除的元素只是置为空 其他元素键值对保持不变
  $delete和splice等一样 直接删除 但也改变了元素的键值对

• params和query的区别:
  params只能用name传值 query可以用name和path传值
  params参数不显示在地址栏中 query参数明文发送
  params是路由的一部分,必须在理由后面添加参数 query是拼接在url后面的参数,没有也没关系

• axios的优势:
  适用promise的方法
  自动转换JSON格式
  客户端支持防御跨网站伪造攻击

• 封装 vue 组件的过程:
  创建一个组件
  import 引用组件 用components注册组件
  父组件给子组件传值可用props
  子组件给父组件传值可用$emit

• assets和static的区别:

  • 相同点:
    assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下
  • 不同点:
    1.assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器
    2.static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间
  • 使用建议:
    将项目中template需要的样式文件js文件等都可以放置在assets中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传

• 单页面应用和多页面应用区别及优缺点:

  • 单页面:
    1.浏览器一开始要加载所有必须的 html, js, css
    2.用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
    3.前后端分离
    4.数据的传递简单
    5.不利于seo
    6.首屏加载时间长
    7.页面复杂度提高很多
    8.url模式 index/#/one
  • 多页面:
    1.页面跳转时是整页刷新
    2.用户体验差，慢，页面切换加载缓慢，流畅度不够
    3.数据传递需要依靠url cookie localStorage等
    4.url模式 index/one.html

• vue组件中的data为什么非得是一个对象:
  Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响

• vue-router响应路由参数的变化
  1.watch
  2.beforeRouteUpdate

• Vue-cli打包命令是什么？打包后导致路径问题，应该在哪里修改
  npm run build
  解决：到config文件夹中打开index.js文件 文件里面有两个assetsPublicPath属性，更改第一个，也就是更改build里面的assetsPublicPath属性:'/'改为'./'
  PS:其他问题 https://www.cnblogs.com/zly1022/p/10108548.html

• vue的两个核心点：
  ViewModel 组件

• vue常用的修饰符：

  • 事件修饰符
    .stop 阻止点击冒泡
    .prevent 阻止默认事件
    .capture 由外到内捕捉事件
    .self 只触发自己范围内的事件 不包括子元素
    .once 只触发一次事件
  • 键盘修饰符
    .enter：回车键
    .tab：制表键
    .delete：含delete和backspace键
    .esc：返回键
    .space: 空格键
    .up：向上键
    .down：向下键
    .left：向左键
    .right：向右键
  • 鼠标按钮修饰符
    .right
    .left

• vue mock的使用:
  https://blog.csdn.net/bocongbo/article/details/81700843

• 什么是mvvm:
  model view viewmodel 将数据和视图绑定在一起 当数据发生改变随即视图也跟着改变

• 什么是 SPA 单页面，它的优缺点分别是什么

  • 只有一个html文件 通过路由改变的方式实现页面切换
  • 优点：
    1.用户体验好
    2.首次加载不需要加载整个页面
    3.对服务器压力小
  • 缺点：
    1.初次加载耗时比较长
    2.不利于SEO

• Vue 的单向数据流：
  vue是单向下行的数据绑定 如：父组件给子组件传值 而子组件不能直接修改父组件的数据

• vue-router 路由模式有几种？
  hash history abstract

• Vue项目的优化：
  1.v-if和v-show的区别使用
  2.使用v-for遍历必须加key
  3.事件的销毁(清除定时器 递归做结束出口)
  4.图片懒加载
  5.路由懒加载
  6.服务端渲染

• Vue 中的 key 作用：
  vue中vnode的唯一标识，用来是diff算法更快 更精准

• Proxy 与 Object.defineProperty 优劣对比：
  Proxy：可以直接监听对象 可以直接监听数组的变化
  Object.defineProperty：兼容性教高(IE9)

• keep-alive:
  配合路由使用 可以是组件保留状态 避免重复渲染
  有两个属性:
  include:组件名只要匹配添加的名称表示会被缓存
  exclude:组件名匹配添加的名称表示不会被缓存
  有两个生命周期：
  activated deactivated

• 父组件监听到子组件的生命周期:
  1.在子组件的生命周期里使用$emit给父组件发送一个事件
  2.在父组件的子组件标签上使用@hook:mounted (hook可以监听任何一个生命周期)

• 直接给一个数组项赋值，Vue 能检测到变化吗？
  不可以 因为

• vue响应式原理：
  vue初始化的时候会遍历对象所有的property并且通过object.defineProptery把他们添加getter和setter方法 而每个vue的组件都有一个watcher函数 当数据发生改变时setter会调用watcher重新计算重新渲染组件

• 手写实现一个双向绑定：

    <input type="text" id="ipt" />
    <p id="p" />
    let oInp = document.getElementById('ipt')
    let oP = document.getElementById('p')
    let obj = {}
    Object.defineProperty(obj,'text',function(){
      set(newValue){
        oInp.value = newValue
        oP.innerHTML = newValue
      }
    })
    oInp.addEventListener('keyup',function(e){
      oInp.text = e.target.value
    })
  

• 怎么解决vue动态设置img的src不生效的问题
  在src里面使用require 因为不这样的话会被默认为静态资源处理