1、vue 的生命周期【8个,作用:更好的实现逻辑】
【创建前后、加载前后、更新前后、销毁前后】
beforeCreated:在实例初始化之后,当前阶段 data、methods、watch、computed 都不能被访问。
created:实例创建之后,这里没有 el, 如果非要访问 DOM,可以使用 vm.nextTick。
beforeMount:挂载前,render 首次调用。
Mounted:挂载之后,真实的 DOM 挂载完毕,完成数据双向绑定,可以访问 DOM 节点。
beforeUpdate:数据更新时调用,完成虚拟DOM 重新渲染和打补丁(patch),在钩子函数中进一步改变状态,不会重新渲染。
Updated:当前阶段DOM 更新完成。注意在些期间不要更新数据,会出现循环更新,该钩子在服务渲染之前不会被调用。
beforeDistory:实例还是可以用的,可以在这里清除定时器。
Distoryed:vue 实例完全销毁。所有的东西解绑,事件监听移除,左右的子实例也会被销毁,钩子在服务器渲染不被调用。
actived:keep-alive 专属,组件激活被调用。
deactived:keep-alive 专属,组件销毁被调用。
2、vue父子组件生命周期的执行顺序
加载过程:
父 beforeCreate
父 created
父 beforeMount
子 breaforeCreate
子 created
子 breforeMount
子 mounted
父 mounted
更新过程:
父 breforeUpdate
子 breforeUpdate
子 updated
父 updated
销毁过程
父 beforeDestroy
子 beforeDestroy
子 destroyed
父 destroyed
3、vue 第一次加载会触发哪些钩子?
正常情况下按顺序加载。
(1)有 el 加载前两个:创建前/后。
(2)没有 el 加载前四个:创建前/后、加载前/后。
(3)创建前/后、加载前/后 这四个方法是一次性的,只执行一次。
(5)DOM 渲染在 Mounted 中就完成了。
4、computed、watch、methods 有什么区别?
(1)computed 不能支持异步,methods 和 watch 可以支持异步。
(2)data 是数据属性,用来存放数据;
computed 是计算属性,用于数据计算;初始化后自动更新;有缓存, 有 getter 和 setter 属性。
methods 调用才会执行,不会同步数据。
(3)computed 适合处理:多个数据影响一个数据【多对一】
watch适合处理:一个数据影响多个数据【一对多】
场景:watch 可以在 2S 后更改数据,computed 不能实现,因为不能异步操作。
注)计算属性不能直接修改。
5、created 和 mounted 有什么区别?
两者都只加载一次。created 是 DOM 没加载完。 mounted 时DOM 加载完了。
6、异步请求在哪一步发起?
created、beforeMount、mounted 中进行异步请求。
7、不需要依赖 DOM 在 Created 中加载,为什么?
快速获取到服务端,减少 loading;ssr 不支持 beforeMount、mounted 钩子函数。
8、为什么接口放在created 中调用?
created 是发生在 mounted 之前。能在mounted 之前拿到this。在created 时template 还没有被渲染成html,但是能够拿到props 和 data。
9、怎么清除定时器?
data 中 this.a = setTimeout ,distoryed 中 clearTimeout(this.a)
10、vue 中的 data 是个函数?
(1)为了保证利用性和独立性。
(2)组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次,就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变
注)vue 中的 data 是一个浅拷贝
11、vue data 中某一个属性的值发生改变后,视图会立即同步执行重新渲染吗?
不会,Vue 实现响应式并不是数据发生变化之后 DOM 立即变化 Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化, Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。 如果同一个watcher被多次触发,只会被推入到队列中一次
12、vue 实例的属性【6个】
data、filters、computed、template、watch、methods