computed
import { computed, ref } from "vue";
const firstName = ref("");
const lastName = ref("");
const name = computed(() => firstName.value + lastName.value);
// name.value = 'list' // 只读,不可修改
const name1 = computed(
{
get() {
return firstName.value + lastName.value;
},
set(value) {
firstName.value = firstName.value + value;
},
},
{
onTrack(e) {
debugger; //调式
},
onTrigger(e) {
debugger; //调式
},
}
);
name1.value = "你好,";
watch与watchEffect
import reactive, ref, watch, watchEffect } from "vue";
const message = ref("");
const message2 = ref("");
watch(message, (newVal, oldValue) => {
//.....
});
watch([message, message2], (newVal, oldValue) => {
//newVal = []
//olValue = []
});
const obj = reactive({ name: "", age: 18 });
watch(obj, () => {}, { deep: true, immediate: true });
watch(
() => obj.age,
() => {}
);
const stop = watchEffect(
(onCleanup) => {
// 默认第一次执行
console.log("message", message.value);
console.log("message2", message2.value);
onCleanup(() => {
//.. 在监听之前执行, 不会默认第一次执行
});
},
{
flush: "post", // 在dom渲染后执行, post, pre, sync
onTrack() {}, // 调试
onTrigger() {}, // 调试
}
);
stop(); // 停止监听
原文地址:http://www.cnblogs.com/JunLan/p/16848680.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性