Vue3/ 计算属性 method computed watch 区别 、Vue内data为什么必须是一个函数 、 props 针对复杂数据类似为什么必须是函数返回一个数组或者对象

一 . 计算属性 method computed watch 区别

methods：执行n此 运行n次函数 强调函数调用 methods方法表示一个具体的操作 主要书写业务逻辑 

computed: 页面中某些数据依赖其他数据进行变动的时候 可以使用计算属性 比如以前使用过滤器 现在Vue3 没有了 就可以用计算属性代替 而且他有最重要的特性 有缓存 有些情况下 调用 computed 中函数n次 如果依赖数据没有变化 只会执行一次函数 因为使用的缓存里面的数据 不用调用函数 强调属性调用 但是利用返回函数的形式 也可以在模板上调用并传参 

watch: 类似于监听 + 事件的机制 监听的值一单发生改变 就执行后面的回调函数 一遍用来监听 data props $router 等参数的变化 
 

总结: 大部分情况下 watch 和 computed 几乎没有差别 但如果要在数据变化的同时进行异步操作 或者 是比较大的开销 那么watch是最佳选择 watch可以看作是 computed 和 methods 的结合体

 

二. Vue内data为什么必须是一个函数 

如果组件复用了多次 data不是一个函数的话 那么多个相同的组件使用data就是同一地址 那么修改一个组件就会到导致其他组件 的数据也发生改变 就会产生bug 

 

三. props 针对复杂数据类似为什么必须是函数返回一个数组或者对象?

    Vue内父组件向子组件传值的时候 对于接收复杂数据类型 props 定义默认值的时候 也是需要写一个函数 返回给一个新地址的形式 不能直接写对象或者数组 因为是同一个地址

props: {
  list: {
    type: Array,
    // default: []  // 不能这样写 
    default: () => []
  }
},