VUE3 watch写法与属性

1、页面初始化时调用调用watch监听需添加immediate属性

export default{data(){return{name:'id'}},watch:{name:{immediate:true,//为true页面初始化时调用调用handler:function(newVal){console.log(newVal)}}}
}

2、当数据为对象时需要添加deep属性深度监听

export default{data(){return{information:{name:'cl',age:'25'}}},watch:{information:{deep:true,// 深度监听 会一层层向下遍历handler:function(newVal){console.log(newVal)}}}
}

3、当数据为对象时监听对象中的某一个属性变化

export default{data(){return{information:{name:'cl',age:'25'}}},watch:{'information.age':{deep:true,handler:function(newVal){console.log(newVal)}}}
}

VUE3 watch写法与属性相关推荐

vue3.x通过ref属性获取元素
在vue2.x中,可以通过给元素添加ref='xxx'属性,然后在代码中通过this.$refs.xxx获取到对应的元素然而在vue3中时没有$refs这个东西的,因此vue3中通过ref属性获取元 ...
vue3+setup写法
setup函数是 Composition API(组合API)的入口在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法再模板中使用 <script>expor ...
vue3函数写法中的状态、函数定义
vue3中有两种写法:类写法.函数写法(hooks) 类写法跟vue一样,函数写法是新增的: 状态是什么: 页面中要显示的东西,放在一个变量中,每次更改完值,就会被拦截,同时再重新渲染页面: 状态的对 ...
vue3组合式写法在方法中出发点击事件
问: 用vue3组合式写法,如何在一个方法中调用a标签的点击事件回答: 在Vue 3的组合式API中,可以通过ref来获取DOM元素的引用,然后使用$el属性访问DOM元素并触发其点击事件.下面是示 ...
vue3.0js 非prop属性的值和setup函数的使用
非prop属性的值一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 prop 定义的 attribute. 因为显式定义的 prop 适用于向一个子组件传入信息,然而 ...
vue3 setup写法（语法糖版本）
vue3.2 版本开始才能使用语法糖! 在 Vue3.0 中变量必须 return 出来, template 中才能使用:而在 Vue3.2 中只需要在 script 标签上加上 setup 属性,无 ...
vue3子组件修改父组件值,vue3 子组件修改属性
如何在TypeScript中应用像Jquery之类的第三方JavaScript框架要在TypeScript引用第三方JavaScript库和框架,首先要了解TypeScript的类型定义文件. Ty ...
VUE开发中/deep/的使用其他写法v-deep:: vue3中写法 :deep(.img)
实际开发中经常会遇到一种情况,一个功能需求例如表格,可以直接使用element等组件库的表格组件,省时省力. 但实际需求总不会是和组件完全一样的,UI会有各种天马行空的样式给你,例如这种表格样式这时 ...
【Vue3】vue3中组合式Api的setup写法快速入门上手起步
要使用Vue3,那必须得会setup,因为setup是组合式API表演的舞台. 安装volar 如果你的VScode之前安装有vuter插件,请先把他禁用或者卸载掉,然后安装volar. 因为,vut ...

VUE3 watch写法与属性

1、页面初始化时调用调用watch监听需添加immediate属性

2、当数据为对象时需要添加deep属性深度监听

3、当数据为对象时监听对象中的某一个属性变化

VUE3 watch写法与属性相关推荐

最新文章

热门文章