今天的起点是利用watch来监听变量，数组，对象。写法很简单，但是需要注意到，数组属于引用数据类型，如果修改数组的值，其引用地址未变，咱们是不能观察到变化。

watch深度监听

watch: {
            list2Copy: {
              handler: function (newV, oldV) {
                console.log("list2被监听",newV,oldV)
              
              },
              deep: true,
            },
          },

想要监听list2,我们需要设置1个计算属性来复制list2,此处顺带演示了一个深复制的方法，可以记一下

 computed: {
            list2Copy: function () {
              return JSON.parse(JSON.stringify(this.list2));
            },
          },

然后每次数组list2的数据改变的时候，虽然list2本身的引用地址未变。但是，咱们复制的数组每次都会重新计算，所以其引用地址肯定不一样

利用ref获取元素

给标签绑定ref属性，然后就可以从vm.$refs.属性值来获取元素。 另外，注意，如果想要获取标签内部的文本，需要用到$nextTick，以确保能够拿到更新后的值。

  watch: {
            count: async function (n, o) {
              console.log(n, o);
              console.log(this.$refs.inp);
              console.log(this.$refs.p.innerText);
              //本次会打印未更新前的值
              let res = await this.$nextTick();
              //这样做可以保证组件中数据已经更新完毕并渲染到DOM之后再执行后续代码，以避免出现未更新的数据或DOM。
              console.log(res.$refs.p.innerText);
            },
          },

钩子函数

这玩意是官方提供用来监测生命周期事件的

Vue.js提供了一系列的钩子函数，它们被划分为若干个阶段，每个阶段对应了组件生命周期中的不同阶段和事件。这些钩子函数允许你在不同的生命周期事件中执行特定的逻辑代码，从而响应和控制组件的行为。

以下是Vue.js中常用的一些钩子函数：

• beforeCreate: 组件实例化之前调用，在此阶段，组件的属性、方法等都没有被初始化，无法访问组件实例本身。
• created: 组件实例化之后调用，在此阶段，组件的属性、方法已被初始化，但还未生成DOM结构。
• beforeMount: 组件DOM挂载之前调用，在此阶段，组件的模板被编译成了渲染函数，并且已经生成了虚拟DOM。
• mounted: 组件DOM挂载之后调用，在此阶段，组件已经生成了真实的DOM结构，并且可以进行DOM操作。
• beforeUpdate: 组件更新之前调用，在此阶段，组件的数据已改变，但还未渲染到DOM中。
• updated: 组件更新之后调用，在此阶段，组件的数据已经渲染到真实DOM中，可以进行DOM操作。
• beforeDestroy: 组件销毁之前调用，在此阶段，组件实例仍可用，但即将被销毁。
• destroyed: 组件销毁之后调用，在此阶段，组件实例已经被销毁，不能再被使用。

我们可以自己写一个实例，来看看每个钩子函数内部，我们的数据长什么样子！

可以观察到mount之前的元素看起来已经出现了，但是其中的{{}}并未被替换，而mounted的元素才是真正的页面元素。

生命周期