1、vue生命周期
2、keep-alive的理解
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。 实际项目中,需要配合vue-router共同使用。如果只想 router-view 里面某个组件被缓存,可以增加router.meta 属性
会比平常的组件多两个生命周期钩子函数,分别是:activated 和 deactivated。使用 keep-alive 包裹的组件在切换时不会被销毁,而是缓存到内存中并执行 deactivated 钩子函数,再次渲染后会执行 activated 钩子函数。
3、created和mounted在实际过程中都用来做什么?
mounted和created都是vue对象生命周期的钩子函数,执行时机不同。
1、created 是在 data配置项的数据挂载到vue对象本身后,会调用的钩子函数。 用 this. 的方式可以拿到data里的数据。 但是数据还没有渲染到模板上。created:通常用于初始化某些属性值,发送网络请求。
2、mounted是在组件的模板初次渲染完毕后会调用的钩子函数。 此时, data里的数据已经渲染到模板上了。mounted:通常在初始化页面完成后,对html的dom节点进行需要的操作
4、vue中data函数里面的属性值修改完对应的视图会不会立即重新渲染?
1. 当数据属于基本类型时 , vue会自动检测并在页面重新渲染
2. 如果数据是引用类型 , 数据改变无法引起页面重新渲染
2.1如果数据是数组,解决方法是合并数组到新数组中
2.2如果数据是对象,解决方法是使用Vue的set方法
5.nextTick()使用场景
作用:为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后 立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。
使用场景: 1.获取数据更新之后的DOM
2.created()中进行DOM操作
3.获取元素宽度
6.computed和watch的区别
computed
是计算属性,依赖其他属性计算值,并且computed
的值有缓存,只有当计算值变化才会返回内容。
watch
监听到值的变化就会执行回调,值没有缓存,在回调中可以进行一些逻辑操作。
7.watch里面不同类型的数据对监听来说会有区别吗?
会有区别,watch监听复杂数据类型需要深度监听.
8.v-for在使用过程中需要注意什么?
1.v-for和v-if建议不要同时使用.
因为v-for比v-if优先级高,如果遍历的数组元素个数比较多,但是满足v-if条件比较少的情况下。会浪费性能。而且,每次刷新页面时,都会执行这样性能不高的代码。
解决方法:可以在computed里循环数组,通过filter的方式,过滤出需要的数据。v-for直接循环计算属性的结果(不用v-if)。而computed是有缓存的,所以,在原始数据没有变化时,不会多次过滤数据,这样,就提高了效率。
2.需要绑定一个key值以给vue一个提示,便于跟踪每个节点的身份而不是重用和重新排序现有元素。并且,key值是唯一的。