计算属性和watch和生命周期函数

计算属性

• 计算属性 computed 调用多次 只执行一次
• 每次计算后，计算属性都会再内存中缓存，多次访问直接使用缓存
• 计算属性的依赖改变都会重新计算并缓存
• 方法 调用多少次，就执行多次

watch监听

• watch 监听属性的变化

• 实例创建开始监听，实例销毁移除监听

• // 监听的完整写法
                  obj: {
                      // handler 固定写法
                       handler(){
                       console.log("obj变化了。。")
                       },
                      // 设置监听对象中的每个属性
                      deep: true,
                      // 配置监听后立即执行
                      immediate: true
                  }
  

• mounted(){
                  // 监听 不仅可以监听普通的属性进行监听，也可以监听表达式（一定要有返回值，且对data有依赖）
                  // 这种监听方式可以随时监听 随时移除
                  // $watch的返回值是移除监听的函数
                  this.unwatch = this.$watch(() => {
                      return this.a * this.b
                  },(newVal,oldVal) => {
                      console.log("a*b变化了")
                      console.log("newVal",newVal)
                      console.log("oldVal",oldVal)
                  })
    
    
                  // this.$watch("要监听的属性"，监听属性变化后执行的回调函数)
              }
  

生命周期函数（钩子函数）

• vue实例的生命周期: 指的是从创建到销毁的整个过程，再这个过程中vue提供了一些方法，给开发人员执行操作
• 生命周期过程

// 1. new Vue()
        // 2. 加载生命周期函数
        // 3. beforeCreate() 这个钩子函数 不能操作vue实例和操作dom
        // 4. 加载配置项 进行数据监听
        // 5. 调用created() 这个钩子函数，可以操作属性和实例的其他配置项，不能操作dom
        // 6. 判断是否有el配置项，有则执行下一步，没有则等待$mount(el)调用，才会执行下一步，否则不执行
        // 7. 判断是否有template
        // 8.1 有template 直接编译template
        // 8.2 没有template 取出el的outerHTML（包含#app本身）当成template进行编译
        // 9. beforeMount()
        // 10. 使用编译好的template替换el的outerHTML
        // 11. 调用mounted() 这个钩子函数后，可以操作dom（操作dom不要使用document）使用ref操作（标签内ref赋值，vue内this.$refs获取所有的ref赋值的节点）
        // 12. 当数据发生变化后dom使用了该数据，则会执行beforeUpdate() beforeUpdate指的是dom更新之前
        // 13. 重新渲染dom
        // 14. 执行updated()

        // 15. 如果调用this.$destroy()
        // 16. 执行beforeDestroy() 需要在这个钩子函数中检查实例是否有对外部的引用，会形成闭包，导致之后可能存在内存泄漏
        // 17. 实例自身也会移除数据监听，事件监听及挂载到自身的子组件
        // 18. 执行destroyed()