computed的写法
在页面中
<div>{{ calcNumber }}</div>
script中
写法1 常用
import { computed, ref } from 'vue';
let price = ref(100);
const priceAdd = () => { //函数方法 price +1
price.value ++;
}
//计算属性
let calcNumber = computed(() => {
return `${price.value}元`//计算属性必须return出去 计算属性相对于函数方法返回 是有缓存的
})
写法2
let calcNumber2 = computed({ //
get(){
return `${price.value}元`
},
set(newValue){ //set方法通过获取到新的值 然后去派发更新 函数的触发等操作
let newPrice = `${newValue}-元`
showPrice.value = newPrice
}
})
computed何时会触发（回调函数）
通过写法2来帮助理解
/**
* get 依赖收集阶段 满足两个条件 1 需要读取计算属性 2. 存在脏数据 （isDirty为true）
* 1.读取计算属性的时候且是脏数据（isDirty=true） 会触发上述的()=>{} 也就是回调函数
* 2.初始化的时候会触发回调函数 isDirty = true
* 读取后的时候，如果依赖的值没有发生变化，不会触发回调函数 此时 isDirty = false
* 当计算属性依赖的值发生变化的时候，会重新触发回调函数 isDirty = true
*
*/
/**
*
* set 派发更新阶段
* 先派发更新 然后执行
*/
computed 缓存机制 优化
//如果computed所依赖的值没有发生变化，会去检查这个isDirty是否为true 为false则不会触发回调函数 所依赖的值没有发生变化 isDirty = false 触发缓存机制 不在触发回调函数
Watch
watch监听的数据
1.ref数据
2.reactive数据 —— ref数据能监听的话 reactive一般都可以 ref的对象类型实际是用reactive实现的
3.函数的返回值 （getter函数）
4.包含上述的数组
写法
import { ref, watch } from 'vue';
let dataList = ref({
name:"沐浴露",
price: 100,
id: 1,
number:1,
});//定义price
/**
* 监听这个price的变化，当price变化的时候执行回调函数
* @param {ref} value 需要监听的值
* @param {function} callback 需要执行的回调函数 接收两个参数 newVal, oldVal 可以只写一个 newval
* @param {object} options 配置项 第三个参数可写可不写 根据实际情况
* 如果监听的是reactive对象 默认开启deep: true
*/
watch(dataList, (newVal, oldVal) => {
console.log(newVal, oldVal);
},{ //当监听的是一个对象时 不能监听到深度的数据 所以需要开启第三个参数的配置
immediate: true, //是否立即执行
deep: true ,//是否深度监听
}
);
取消监听写法
const stopWatch = watch(dataList, (newVal, oldVal) => {
console.log(newVal, oldVal);
newVal.number>2 && stopWatch(); //停止监听
},{ //当监听的是一个对象时 不能监听到深度的数据 所以需要开启第三个参数的配置
immediate: true, //是否立即执行
deep: true ,//是否深度监听
}
);
第一个参数为函数且返回一个值 & 监听多个值
/**
* 第一个参数为函数且返回一个值
*/
cosnt stop = watch(()=>dataList.value.number, (newVal, oldVal) => {
newVal>2 && stop(); //停止监听
})
/**
* 监听多个值 采用 watch([()=>xxx , ()=>xxx], (newVal, oldVal) => {})
* or
* watch([value1,value2,...],(new, old )=>{})
*/
cosnt stop = watch([()=>dataList.value.number,()=>dataList.value.price], (newVal, oldVal) => {
newVal>2 && stop(); //停止监听
})
watch([num1,val2], (newVal, oldVal) => {
console.log(newVal, oldVal);
})
watchEffect的用法 和watch的区别
watchEffect 监听多个值，当监听的值发生变化时，自动执行回调函数
watch 和 watchEffect的区别：
-
watchEffect 不需要手动传入监听的值，它会自动监听回调函数中使用到的值 数据变化时重新执行该函数
watch 需要手动传入监听的值，数据变化时执行回调函数 -
watchEffect 会立即执行一次 并在依赖的数据变化时再次执行
watch 不会立即执行 只有数据变化时才会执行 -
watchEffect 默认开启deep immediate
/**
* @param {function} callback 回调函数
*/
watchEffect(() => {
dataList.value.number>2
})
