Vue数据处理方式

1、computed 计算属性

• 对于任何包含响应式数据的复杂逻辑，都应该使用计算属性
• 计算属性将被混入到组件实例中。所有getter和setter的this上下文自动绑定为组件实例

computed vs methods

• 计算属性是有缓存的

<view>{{mComputed}}</view>
<view>{{mComputed}}</view>
<view>{{mComputed}}</view>

<view>{{getAllNumber}}</view>
<view>{{getAllNumber}}</view>
<view>{{getAllNumber}}</view>

const mComputed =computed(()=>{
    //mComputed的getter方法
    return page.value;
})
const getAllNumber = () => {
    return mOne + mTwo;
}

当分别多次调用时，计算属性只会调用一次，而getAllNumber方法会调用三次

• 计算属性会基于它们的依赖关系进行缓存
• 当数据不发生变化时，计算属性是不需要重新计算的
• 如果依赖的数据发生变化，使用时，计算属性依然会重新计算

computed的getter和setter

const fullName = computed({
    get() {
        return `${firstName.value} ${lastName.value}`;
    },
    set(value) {
        console.log(newValue);
        const [first, last] = value.split(' ');
        firstName.value = first;
        lastName.value = last;
    }
})

2、watch 侦听器

• 在data返回的对象中定义了数据，数据通过语法等方式绑定到template中
• 当数据变化时，template会自动更新显示最新的数据
• 在某些情况下，希望在代码逻辑中监听某个数据的变化，就需要侦听器watch来完成

//mValue:需要监听的对象
//newVaule：变更后的值
//oldVaule：之前的值
watch(mValue, (newValue, oldValue) => {
    console.log(newValue);
})

• 默认情况下，侦听器只会针对监听的数据本身的改变（当内部元素发生改变时，是不能侦听的），要用到配置选项
• deep: true:加上该属性即可达到深度监听到具体某个元素的改变
• immediate:true:加上该属性，第一次运行就会立即执行

watch(mItem, (news, olds) => {
    console.log(news)
    console.log(olds)
}, {
  deep: true,
  immediate:true
})

• 注意：当变更(不是替换)对象或数组并使用deep选项时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。vue不会保留变更之前值的副本。所以newValue和oldValue是相同的值。