vue中的生命周期

1.vue生命周期有哪些

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

acitivated
deacitivated

beforeCreate() {
    console.log("初始化vue实例之前")
},
created() { 
    console.log("初始化vue实例之后")
},
beforeMount() {
    console.log("js中的数据挂载到html之前")
},
mounted() {    
    console.log("js中的数据挂载到html之后")
},
beforeUpdate() {
    console.log("vue中的data数据发生改变之前")
},
updated() {
    console.log("vue中的data数据发生改变之后")
},
beforeDestroy() {
    console.log("vue实例销毁之前")
},
destroyed() {
    console.log("vue实例销毁之后，VUE的效果就消失了，比双向绑定")
}

2. 部分细节

比较常用的：
created 组件被创建完后，回调created函数
mounted 组件创建完后，template挂载到DOM上，再回调mounted函数
updated 页面发生更新的时候，更新完就回调用updated函数

3.部分对比

（1）watch、updated

watch:
监听器,监听某个数据的变化从而来执行一些操作
1.仅仅是数据发生改变的时候会侦听到
2.只是会检测到你写在watch里的那些属性,没写的就不会触发
3.经常会和v-model一起使用，v-model中的数据变化，就会被watch监听到

updated:
是vue生命周期里面的一个钩子函数—data数据更新后触发视图更新
这里是视图更新之后的操作可以在这里执行
1.执行到它的时候时候是数据发生变化且界面更新完毕
2.不能监听到路由数据(例如网址中的参数)
3.所有的数据发生变化都会调用(消耗性能)
4.每次触发的代码都是同一个

（2）acitivated / deacitivated

acitivated 组件处于活跃状态时
deacitivated
这两个函数，只有该组件使用了keep-alive，被保持了状态，才是有效的（和vue-router常一起用）
（keep-alive作用：主要是让组件不要频繁的创建created和销毁destroyed）

(3) computed和watch的区别

计算属性computed :

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算

2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

3. computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值，data中没有直接声明出要计算的变量，也可以直接在computed中写入

4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed（一个数据受多个数据影响）

5. 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：

1. 不支持缓存，数据变，直接会触发相应的操作；
2. watch支持异步；
3. 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 当一个属性发生变化时，需要执行对应的操作；一对多；（一个数据影响多个数据）
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
   immediate：组件加载立即触发回调函数执行，
   deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。