vue知识点总结

1.<keep-alive相关知识点

可接收三个属性

• include: 包含的组件，可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存。

• exclude: 排除的组件，以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存，当匹配条件同时在include与exclude存在时，以exclude优先级最高。

• max: 缓存组件的最大值，类型为字符或者数字,可以控制缓存组件的个数，一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

  keep-alive 对应的生命周期函数

  当组件被缓存时：会自动触发deactivated生命周期函数（先）

  被激活时：会自动触发activated生命周期函数（后）

2.vue在更新DOM时是异步执行的，在拿到show的值时，v-if=true,第一种在他渲染时直接是获取不到的，必须等到视图更新完成，回去执行回调函数

<template> <div> <h1 ref='h1' v-if="show">nowcoder</h1> </div> </template> <script> export default { data() { return { show: false } }, mounted() { this.show = true // 此处填写代码 } } </script>

console.log(this.$refs.h1.offsetWidth) 错误

setInterval(() => { console.log(this.$refs.h1.offsetWidth) }) 正确

• 易错示例、

  new` `Vue({
      ``data: { a: ``'first'``, b: ``'second'` `},
      ``created: function () { console.``log``(``this``.a) },
      ``mounted(){ console.``log``(``this``.b) }
  })

只能输出first 因为mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。但是题例中没有执行dom挂载，所以mounted不会执行

3.单页面应用程序spa

SPA的优点:

无刷新切换内容，提高用户体验。 符合前后端分离的开发思想，通过ajax异步请求数据接口获取数据，后台只需要负责数据，不用考虑渲染。前端使用vue等MVVM框架渲染数据非常合适。

•减轻服务器压力，展示逻辑和数据渲染在前端 完成，服务器任务更明确，压力减轻。

•后端数据接口可复用，设计JSON格式数据可 以在PC、移动端通用。

缺点: •不利于SEO（搜索引擎优化），应用数据是 通过请求接口动态渲染，不利于SEO。 •首页加载慢，SPA下大部分的资源需要在首 页加载，造成首页白屏等问题。

4.$nextTick是什么？如何用？有什么作用？

①了解一个前提，vue更新dom时是异步更新的。简单说就是，有一个队列，里面都是等着更 新的数据，数据都变完了，dom再更新。就是异步更新。需要使用$nextTick(nextTick)原因是Vue是异步渲染

②使用场景：如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()、、 在created等虚拟DOM没有完成挂载的钩子函数中，可以把操作语句放在$nextTick的回调函数中返回promise对象

③原理：简单理解就是一个setTimeout函数

5.vue-layload图片懒加载

• 安装cnpm install vue-lazyload --save-dev

• import 导入

  • import VueLazyload from 'vue-lazyload'

    Vue.use(VueLazyload) // 或者写配置项 Vue.use(VueLazyload, { preLoad: 1.3, // 预载高度比例 error: 'dist/error.png', // 加载失败图片 loading: 'dist/loading.gif', // 加载中 attempt: 1 })

• <img v-lazy=> 代替src

• :key="" 可加可不加，如果不加就会出现，页面刷新，其他内容都刷新了，但是只有图片不刷新的情况 。因为key可能相同，所以页面不会更新！！！

6.客户端渲染和服务器端渲染优缺点

7.v-if和v-show的区别

v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏 不能用于权限操作（防止手动修改）

v-if 是动态的向 DOM 树内添加或者删除 DOM 元素

v-show是无论结果为false还是true都会进行渲染，而v-if只有结果为true的时候才会进行渲染。

8.watch和conputed区别

watch和computed的其中一个关键区别就是watch可以执行异步操作，而computed不能执行异步操作。

watch侦听器用法

• 若要刚进入页面时进行触发 immediate:true/false

• 如果要监听对象属性deep：true

9.vue中检测变化的注意事项

1. 对于对象

• Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的

• 例如：var vm = new Vue({
  data:{
  a:1
  }
  })
  // `vm.a` 是响应式的
  vm.b = 2
  // `vm.b` 是非响应式的

• 解决方法：Vue.set(vm.someObject, 'b', 2)

2.对于数组

当你利用索引值设置一个数组项时 例如vm.items[indexOfItem] = newValue

当你 修改数组长度时 vm.items.length = newLength

   var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

解决第一种： Vue.set(vm.items, indexOfItem, newValue)

解决第二种： vm.items.splice(newLength)

10.vue中diff算法

• 对diff算法的理解

  diff算法用来计算出Virtual DOM中改变的部分，然后针对该部分进行DOM操作，而不用重新渲染整个页面，渲染整个DOM结构的过程中开销是很大的，需要浏览器对DOM结构进行重绘与回流，而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM，这样能够最小化操作DOM结构，能够最大程度上减少浏览器重绘与回流的规模。

  当选用diff算法进行部分更新的时候就需要比较旧DOM结构与新DOM结构的不同，此时就需要VNode来描述整个DOM结构，首先根据真实DOM生成Virtual DOM，当Virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后通过newVNode和oldVNode进行对比，发现有不同之处便通过在VNode中elm属性相对应的真实DOM节点进行patch修改于真实DOM，然后使旧的Virtual DOM赋值为新的Virtual DOM。