Vue学习之监视属性watch

简介

设置监视属性的作用：

当被监视的属性发生变化时，回调函数会自动调用，进行相关操作。
监视的熟悉必须存在，才能进行监视。
使用vue的配置对象中的watch属性进行配置。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>监视属性</title>
</head>
<body><div id="root">{{a1}} <br>{{person}}</div><script src="./js/vue.js"></script><script>Vue.config.productionTip = false;const vm = new Vue({el:"#root",data:{person:{name:"yehaocong",age:18,school:{name:"jiaying"}},a1:66,},watch:{//正常写法，可以进行一些属性配置//属性名必须在data中存在person:{//开启深度监视，默认是关闭的//vue自身可以监视多层数据，但是watch属性的数据默认不能监视多层，要手动开启//deep:true,//是否需要在页面加载时就调用一次回调函数，默认不调用，由这个属性设置。//immediate:true,//回调函数，会接收两个值，一个是改变前，一个是改变后handler(){console.log("被修改了");}},//简便写法：//属性名必须在data中存在//会接收两个值，一个是改变前，一个是改变后//这种方式就不可以进行一些额外配置，比如深度监视，初始化等a1(oldV,newV){console.log("a1属性被修改了，旧值：",oldV,",新值：",newV);}}})</script>
</body>
</html>

实现深度监视，只需要deep属性：

Vue学习之监视属性watch相关推荐

Vue学习之ref属性
简介主要讲解vue中的ref属性. 直接先说结论: 专门被用来给html元素和子组件注册引用信息的(id属性的替代者). 该属性应用在html元素时,获取的是dom元素对象,如果应用在组件标签上,那 ...
VUE 学习代码监视和模板语法回调函数
文章目录 HelloWorld 模板语法 03_计算属性和监视 HelloWorld <!DOCTYPE html> <html lang="en"> &l ...
Vue 学习笔记 — css属性计算的问题
简书今天在使用Vue时遇到一个问题:在切换css内联属性时某些特殊属性的计算会有问题,无法得到预期的结果. 例子: https://jsfiddle.net/blqw/cLwau40z/ 上面的页面 ...
Vue学习之props属性的使用
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.props 二.项目中的使用提示:以下是本篇文章正文内容,下面案例可供参考一.props 功能:让组件接收外部传过来 ...
Vue学习_计算属性
实现姓名案例: 1.插值语法实现姓名案例直接从vm中读取. <!doctype html> <html lang="en" xmlns:v-model=&quo ...
Vue 监视属性 watch
<!--监视属性 watch:1. 当被监视的属性变化时,回调函数自动调用,进行相关操作2. 监视的属性必须存在,才能进行监视3. 监视的两种写法:(1). new Vue 时传入 watch ...
【vue系列-03】vue的计算属性，列表，监视属性及原理
vue的核心属性一,vue核心属性 1,计算属性 2,监视属性 3,样式绑定 3.1,class样式绑定 3.2,style样式绑定 4,条件渲染 5,列表渲染 5.1,遍历列表 5.2,key的作 ...
Vue计算属性、监视属性
一.Vue计算属性 1. 定义:要用的属性不存在,要通过已有属性计算得来 2. 原理:底层借助了Object.defineproperty方法提供的getter和setter 3. get函数什么时候 ...
vue计算属性与监视属性
计算属性与监视属性计算属性在computed对象中定义计算属性的方法,在页面中使用{{方法名}} 监视属性通过 vm对象中的$watch方法或者 watch配置来监视指定的属性, 当属性发生变化 ...

Vue学习之监视属性watch

简介

Vue学习之监视属性watch相关推荐

最新文章

热门文章