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中检测变化的注意事项
-
对于对象
-
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。