厦门企业官方网站建设,多语言版本网站制作,百度贴吧首页,手机腾讯网文章目录 1. 作用2. 格式3. 示例3.1 value 值为字符串3.2 value 值为函数3.3 value 值为对象 4. 与计算属性对比 1. 作用
监视数据变化#xff0c;执行一些业务逻辑或异步操作。
2. 格式
监听器 watch 内部以 key #xff1a;value 的形式定义#xff0c;key 是 data 中的… 文章目录 1. 作用2. 格式3. 示例3.1 value 值为字符串3.2 value 值为函数3.3 value 值为对象 4. 与计算属性对比 1. 作用
监视数据变化执行一些业务逻辑或异步操作。
2. 格式
监听器 watch 内部以 key value 的形式定义key 是 data 中的属性名value 是监听到 key 变化后执行的回调函数。value 可以是字符串可以是函数可以是对象。
value 如果为字符串字符串为方法名称需要通过 methods 定义好value 如果为函数通过函数可以获取到监听对象更新前和更新后的值value 如果为对象对象内可以包含回调函数的其他选项例如是否初始化时进行监听 immediate : true或是否执行深度遍历 deep : true。
如 value 为函数watch 格式为
watch: {// 该方法会在数据变化时触发执行// data 中属性的名称为数据属性名// : function 可以省略。数据属性名 : function (newValue, oldValue) 可简写为 数据属性名 (newValue, oldValue)数据属性名 : function (newValue, oldValue) {一些业务逻辑 或 异步操作。},// data 中对象数据的属性需要写为 对象.属性名对象.属性名 : function (newValue, oldValue) {一些业务逻辑 或 异步操作。}
}如 value 为对象watch 格式为
watch: {数据属性名 : {deep: true, // 深度监视(针对复杂类型)immediate: true, // 是否立刻执行一次handlerhandler (newValue) {console.log(newValue)}}
}3. 示例
3.1 value 值为字符串
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}/style/headbodydiv idappdiv classboxdiv classinput-wraptextarea v-modelwords/textarea/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {words: },methods:{changewords(){console.log(this.words)}},watch: {words : changewords // 注意单引号不要漏掉}})/script/body
/html执行结果
3.2 value 值为函数
将上面代码改写成 value 值为函数的格式
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}/style/headbodydiv idappdiv classboxdiv classinput-wraptextarea v-modelwords/textarea/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {words: },watch: {words (newvalue, oldvalue) {console.log(newvalue)}}})/script/body
/html执行结果
3.3 value 值为对象
将上面代码改写成 value 值为对象的格式
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}/style/headbodydiv idappdiv classboxdiv classinput-wraptextarea v-modelwords.cat/textarea/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {words: {cat : 奶牛猫,dog : 哈士奇,}},watch: {// 对象.属性名的单引号不要漏掉words.cat : {deep : true,immediate : true, // 立刻执行一次handlerhandler (newvalue) {console.log(newvalue)}}}})/script/body
/html执行结果 因为设置了 immediate : true所以首次打开页面会打印出 “奶牛猫” 字样。
4. 与计算属性对比
计算属性的结果会缓存只有依赖属性发生变化才会重新计算且必须返回一个数据主要用来进行数据计算。 监听器主要监听某个数据的变化从而执行回调业务不仅仅局限于返回数据比如数据变化时执行异步发送Ajax请求或开销较大的操作时采用监听器较好。
