随笔- 40 文章- 0 评论- 22 阅读- 12万

vue3如何使用watch监听

注：在vue3中使用watch需要按需引入，这也是vue3和vue2的一大区别

例：

1	`import {` `ref, reactive, h, onMounted, watch }` `from` `"vue";`

如何使用：

const jianting: any = reactive([
  { a: 1, b: 1 },
  { aa: 2, b: 2 },
]);
const jianting1: any = reactive([
  { a: 3, b: 3 },
  { aa: 4, b: 4 },
]);
const jianting3: any = reactive({
  a:5
});
const newAdd = () => {
  jianting[0].a = "111";
  jianting1[0].a = "333";
  jianting3.a='555'
};
watch(
  () => [...jianting, ...jianting1,jianting3],
  ([newjianting, newjiantingte,newjianting3]) => {
    console.log(newjianting, "newjianting");//均打印修改后的数据
    console.log(newjiantingte, "newjiantingte");
    console.log(newjianting3,'newjianting3')
  },
  {
    deep: true,
  }
);

vue3和vue2的不同以及优缺点：

在vue2中使用，object.defineproperty（）,来对数据进行观察监听，vue3中，使用proxy代理模式来进行监听；其中在vue2中，使用的defineproperty，只
能针对对象监听,如果想要监听数组，就需要增强并且替换原型链的方式方法，而监听对象，每次只能监听对象里面的一个键，所以导致，需要去循环监听，那么这样就很影响
性能。而在vue3中的proxy就解决了这些问题，他可以对任意数据直接监听。