vue监听字符串长度_Vue 的 computed 和 watch 的区别
computer 计算属性
通过计算得出的属性就是计算属性
计算属性可以是一个函数或者是一个getter和setter组成的对象
看看一个展示名字的实例:
需求一:展示名字
// 引用完整版 Vue,方便讲解import Vue from "vue/dist/vue.js";
new Vue({ data: { firstName: 'Jacky', lastName: 'Lee' }, computed: { fullName() {return this.firstName + ' ' + this.lastName } }, template: `
{{fullName}}
`,
methods: {}
}).$mount("#app");
fullName通过first.Name + lastName 计算得出,fullName使用时不需要加括号,可以直接作为属性使用,展示再页面中
需求二:可以改名字
// 引用完整版 Vue,方便讲解import Vue from "vue/dist/vue.js";
new Vue({ data: { firstName: 'Jacky', lastName: 'Lee' }, computed: { fullName: { get(){return this.firstName + ' ' + this.lastName }, set(val){const names = val.split(' ');this.firstName = names[0];this.lastName = names[1]; } } }, template: `
{{fullName}} 改名字
`,
methods: {
change() {
this.fullName = "Candy Wang"
console.log('名字已更改') // 重复点击‘改名字’只打印一次? }
}
}).$mount("#app");
通过setter和getter使得计算属性可修改,点击‘改名字’时,计算结果发生变化,重新运行计算,进行页面更新。计算属性的结果会被缓存,计算属性只有在它的相关依赖发生改变时才会重新计算。所以再次点击‘改名字’由于计算结果不变,不会重新运行计算。
watch 监听/侦察
当数据变化时执行一个函数
watch属性可以是字符串、函数、对象、数组
拥有deep,immediate两属性
watch的监听方式
请看下面的例子:
// 引用完整版 Vue,方便讲解import Vue from "vue/dist/vue.js";
new Vue({ data: { n: 0, obj: { a: "a" } }, template: `
n+1 obj.a + 'hi' obj = 新对象
`,
watch: {
n() {
console.log("n 变了");
},
obj() {
console.log("obj 变了");
},
"obj.a": function() {
console.log("obj.a 变了");
}
}
}).$mount("#app");
点击n+1 :打印出“n 变了”
点击obj.a + 'hi' : 打印出“obj.a 变了”,不打印"obj 变了"
不点击obj.a + 'hi' , 点击obj = 新对象 : 打印出"obj 变了",不打印"obj 变了"
说明watch的监听方式是:简单数据类型看值,复杂数据类型(对象)看地址
抬个杠,那我想通过监听obj也能obj.a变化可以吗?
答:可以,使用deep
deep属性
watch: { n() { console.log("n 变了") }, obj() { console.log("obj 变了") deep: ture // 可以监听到obj对象的所有内部属性 }, "obj.a": function() { console.log("obj.a 变了") } }
点击obj.a + 'hi' : 打印出“obj.a 变了”和 "obj 变了"
当deep:true 会监听到obj对象的所有内部属性,默认值为false
immediate属性
请看这个例子
// 引用完整版 Vue,方便讲解import Vue from "vue/dist/vue.js";
new Vue({ data: { firstName: 'Jacky', lastName: 'Lee', fullName: '' }, watch: { firstName: { handler: 'change' } }, template: `
{{fullName}} 改名字
`,
methods: {
change() {
this.fullName = this.firstName + ' ' + this.lastName
}
}
}).$mount("#app");
通过fullName属性展示 firstName + lastName 的计算值
运行上面代码,页面啥也没有
然后点击“改名字”,页面显示 John Lee
啊?怎么回事Jacky Lee怎么不显示?
答:因为watch不会监听第一次变化
改造一下
watch: { firstName: { handler: 'change', immediate: ture }}
初始页面展示 Jacky Lee
当 immediate:true 时,回调函数会在监听开始后立刻执行,可以监听到到第一次变化。
总结:
computed是用来计算一个值的,使用时不需要加括号,可以直接当属性使用。computed拥有依赖缓存特性,如果依赖值不变,computed不会重新计算
watch是用来监听的,有两个选项,immediate 和 deep,当immediate: true时,表示会在第一次运行是执行这个函数,当 deep:true时,如果监听一个对象,会同时监听其内部属性。watch没有依赖缓存特性。
vue监听字符串长度_Vue 的 computed 和 watch 的区别相关推荐
- vue监听字符串长度_vue中的计算属性和侦听器
计算属性概念 模板内的候通现端数是制这.效合应近环大过这业据的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护在重说道.础过学开概码数项遍间里哦行览屏屏 ...
- vue watch第一次监听不到_Vue 的 computed 和 watch 的区别
computer 计算属性 通过计算得出的属性就是计算属性 计算属性可以是一个函数或者是一个getter和setter组成的对象 看看一个展示名字的实例: 需求一:展示名字 // 引用完整版 Vue, ...
- vue 监听map数组变化_解决vue无法侦听数组及对象属性的变化问题
一.数组 1.可以监听到的情况 如push.splice.=赋值(array=[1,2,3]) 2.无法监听到的情况 使用下标修改某个元素(这种比较常见) array[index] = 1 objec ...
- Vue父组件传子组件数据中,Vue监听不到数据改变
Vue父组件传子组件数据中,Vue监听不到数据改变 官方文档说明(引用来自官网) 检测变化的注意事项 由于 JavaScript 的限制,Vue 不能检测数组和对象的变化.尽管如此我们还是有一些办法来 ...
- Vue监听滚动条事件 点击回到顶部
Vue监听滚动条事件 点击回到顶部 监听滚顶条事件: created () {this.listenerFunction(); }, beforeDestroy () {document.remove ...
- Vue跨路由触发事件,Vue监听sessionStorage
近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...
- vue 监听页面滚动事件:触发animate.min.css动画特效
一.问题答疑: 1. animate.css 如何在vue项目中引入?或引用? 2. 如何监听滚动事件,触发animate.class动画播放? vue 监听滚轮滚动事件,for循环 ,动态id,代码 ...
- vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题
vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{fetchData(){console.log('路由发送 ...
- vue 监听对象里的特定数据
2019独角兽企业重金招聘Python工程师标准>>> vue 监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: {params: function( ...
最新文章
- npm run build打包失败
- ScratchCardView:刮刮卡视图组件
- control.add()
- 为什么一个星期是7天
- 数据库学习笔记6--MySQL多表查询之外键、表连接、子查询、索引
- java 指针_java多线程学习二十二:::java中的指针
- 整理你的个人IT资料库
- 为什么linux的新得立软件下载,linux,debian_蝶变(Debian)_Xfce_新立得软件管理_安装不上软件了,怎么处理?,linux,debian - phpStudy...
- oracle删除多条从js到java_一次oracle大量数据删除经历
- checked jq 添加_jquery动态添加复选框.attr(“checked”,true)不起作用
- Java开发岗位面试题
- Java学习——继承和多态
- vue音乐项目歌手页面滚动、吸顶效果
- com.mysql.jdbc.jdbc2.optional.MysqlXADataSource 找不到
- 调试at91-sama5d27遇到的一些问题(3)
- 关于税控的一些问题总结
- 基于Transformer的数字子母翻译
- 百度智能云 x 联通在线丨智能助理,“智”理你的通话
- 怎样往linux社区提交代码
- Linux性能优化实战学习笔记:第十讲==中断
热门文章
- mongoDB mac 安装 小白必备
- 带用户名和密码的GitHub链接
- sqlmap源码阅读_setPreprocessFunctions和_setPostprocessFunctions
- Getting started with Bitcoin
- mvc中的mvc分别指什么_什么是MVC,它像三明治店吗?
- 139_Power BI之某制造企业HR相关数据年度复盘
- linux升级openssh8.2,openssh7更换升级位8.2版本过程
- go interface转int_go语言学习总结(三十三)Go泛型编程
- Could NOT find OpenSSL, try to set the path to OpenSSL root folder in the system variable OPENSSL_
- chrome导出插件