Vue3.0 —— watch函数

1、监听 ref 数据

watch ( 要监听的目标，改变后触发的回调 )

 watch(count, (newValue, oldVlaue) => {console.log( newValue, oldVlaue);});

2、监听通过 reactive 定义的对象数据,以及需要深度监听的情况


setup(){const obj = reactive({name: "ss",age: 54,brand: { id: 1,name: "哈哈",},});//const update = () => {(obj.name = "sdd"), (obj.age = 44);};const updateBrandName = () => {obj.brand.name = "哇嘎嘎";};watch(obj,() => {console.log("数据改变了");},{// 深度监听deep: true,// 默认执行监听immediate: true,})
}

3、监听多个数据的变化（使用数组）

watch([count, obj], () => {console.log("监听多个数据");
});

4、只监听对象中某一个属性的变化例obj.name

 watch(// 第一个参数为函数写法，返回该属性（固定写法）() => obj.name,() => {console.log("监听obj.name的变化");}
);

Vue3.0 —— watch函数相关推荐

vue3.0 ref 函数
先写一个基础的vue3模板 <template><div><p>个人信息</p><p>姓名:{{ name }}</p>< ...
Vue3.0 - computed函数
目录前言 computed的基本用法 computed的set和get方法前言 computed计算属性,与普通JS函数相比computed性能更好,以为它存在计算缓存,js函数没有,其计算结果是 ...
YDOOK: vue3.0: vue-cli4.5: stup()与各类钩子函数详细使用教程
YDOOK: vue3.0: vue-cli4.5: stup()与各类钩子函数详细使用教程 1. vue3.0 钩子函数与 vue2.0 钩子函数的区别与对比: vue3.0 钩子函数在 vue2 ...
探秘 Vue3.0 - Composition API 在真实业务中的尝鲜姿势
前言 2019年2月6号,React 发布 16.8.0 版本,新增 Hooks 特性.随即,Vue 在 2019 的各大 JSConf 中也宣告了 Vue3.0 最重要的 RFC,即 Functio ...
Vue3.0 组合式 API 分析与实践
本文带大家深入理解组合式 API 的设计详情,同时加入我们的实践经验总结. 01 背景 Vue3.x 版本的出现带来了许多令人眼前一亮的新特性,其中组合式 API(Composition API),一 ...
vue3.0实现原理
vue3.0.js ------------------ function Vue(option){ this.$el = document.querySelector(option.el); // ...
（六）Vue3.0预学习
Vue3.0预学习 Vue3要来了Vue2就要过时了吗 Vue3 Vue2.x马上就要过时了吗 Vue3升级内容 Proxy实现响应式 Object.defineProperty的缺点 Proxy实现 ...
onmounted vue3_基于项目时间阐述vue3.0新型状态管理和逻辑复用方式
作者:Mingle 转发链接:https://mp.weixin.qq.com/s/iOq-eeyToDXJ6lvwnC12DQ 前言背景:2019年2月6号,React 发布「16.8.0」版 ...
vue 前端显示图片加token_前端Vue3.0：从0到1手把手撸码搭建管理后台系统
第1节 – 了解项目开发流程手把手撸码前端 – 第1学时了解产品从0到1的开发流程,产品经理.UI设计师.研发部.测试工程师第2节 – 构建vue项目.代码仓库管理手把手撸码前端 – 第2学时 ...

Vue3.0 —— watch函数

Vue3.0 —— watch函数相关推荐

最新文章

热门文章