Vue核心知识——computed和watch的细节全面分析
computed和watch的区别
computed特性
1.是计算值,
2.应用:就是简化tempalte里面{{}}计算和处理props或$emit的传值,computed(数据联动)。
3.具有缓存性,页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必再次执行函数
watch特性
1.是观察的动作,
2.应用:监听props,$emit或本组件的值执行异步操作,watch(异步场景)。
3.无缓存性,页面重新渲染时值不变化也会执行
注:watch:一般监听单个变量或者一个数组或对象,computed: 监听在同一个实例里的很多个变量。
watch 并不适用于显示某一个数据以及数据的拼装等。watch 用在监听数据变化,做某些指令操作(给后台发数据请求)
一、computed
定义:是一个计算属性,类似于过滤器,对绑定到view的数据进行处理
实现进行简单的字符串拼接
1.不适用computed的用法
new Vue({
el: '#app',
template:"<p>{{firstName +' '+ lastName}}</p>",
data: {
firstName: 'lucas',
lastName: 'Root'
},
})
/*lucas Root*/
2.使用computed
new Vue({
el: '#app',
template:"<p>{{fullName}}</p>",
data: {
firstName: 'lucas',
lastName: 'Root'
},
computed:{
fullName(){
return `${this.firstName} ${this.lastName}`;
}
}
})
3.使用methods方法
methods方法实现和computed相同拼接
let vm = new Vue({
el: '#app',
template:`
<div>
<p>computed:{{fullName}}</p>
<p>methods:{{names()}}</p>
</div>
`,
data: {
firstName: 'lucas',
lastName: 'Root'
},
computed:{
fullName(){
return `${this.firstName} ${this.lastName}`;
}
},
methods:{
names() {
return `${this.firstName} ${this.lastName}`;
}
}
})
/*
computed:lucas Root methods:lucas Root
*/
注:computed属性的fullName不可在data里定义,否则会报错。
4.使用computed的好处
当我们改变data变量值时,整个应用会重新渲染,vue 会被数据重新渲染到 dom 中。这时,如果我们使用 names方法,随着渲染,方法也会被调用,而 computed 不会重新进行计算,从而性能开销比较小。当新的值需要大量计算才能得到,缓存的意义就非常大。
如果 computed 所依赖的数据发生改变时,计算属性才会重新计算,并进行缓存;当改变其他数据时,computed 属性 并不会重新计算,从而提升性能。
当我们拿到的值需要进行一定处理使用时,就可以使用 computed。
5.computed的get与set用法
let vm = new Vue({
el: '#app',
template:`
<div>
<p>computed:{{fullName}}</p>
</div>
`,
data: {
firstName: 'lucas',
lastName: 'Root'
},
computed:{
fullName:{ /*若使用方法写法fullName()会报错,需使用属性写法*/
get() { //回调函数 当需要读取当前属性值是执行,根据相关数据计算并返回当前属性的值
return `${this.firstName} ${this.lastName}`;
},
set(val) { //监视当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据,val就是fullName的最新属性值
const names = val.split(' ');
console.log(names);
this.firstName = names[0];
this.lastName = names[1];
}
}
},
})
vm.fullName="hello world"; //也可以在浏览器控制台修改输出
/*
computed:hello world
*/
二、watch
定义:watch是一个观察的动作,例如,监听 firstName 数据,并根据改变得到的新值,进行某些操作。
2.1示例
let vm = new Vue({
el: '#app',
template:`
<div>
<p>computed:{{fullName}}</p>
</div>
`,
data: {
firstName: 'Lucas',
lastName: 'Root',
fullName:'names',
},
watch:{
firstName (newName1,oldName1){
console.log('this firstName newName '+newName1);
console.log('this firstName oldName '+oldName1);
this.fullName = newName1 + ' ' + this.lastName;
},
},
}) // vm.firstName="hello";
/*
this firstName newName hello
this firstName oldName Lucas
*/
上面是监听firstName和lastName的变化,但是仅限简单数据类型
注:watch:一般监听单个变量或者一个数组,computed: 监听在同一个实例里的很多个变量。
2.2监听简单数据类型
data(){
return{
'first':2
}
},
watch:{
first(){
console.log(this.first)
}
},
2.3 监听复杂数据类型
1.深度监听deep
不使用 deep 时,当我们改变 obj.a 的值时,watch不能监听到数据变化,默认情况下,handler 只监听属性引用的变化,也就是只监听了一层,但改对象内部的属性是监听不到的。
let vm = new Vue({
el:'#app',
template: `
<div>
<p>Obj.a: <input type="text" v-model="obj.a"/></p>
</div>
`,
data: {
obj: {
a: '123'
}
},
watch: {
obj: {
handler () {
console.log('obj.a changed')
},
// immediate: true
deep: true
}
}
})
immerdiate 属性:通过声明 immediate 选项为 true,可以立即执行一次 handler。
通过使用 deep: true 进行深入观察,这时,我们监听 obj,会把 obj 下面的属性层层遍历,都加上监听事件,这样做,性能开销也会变大,只要修改 obj 中任意属性值,都会触发 handler,那么如何优化性能呢?请看下面2.4监听对象单个属性
watch: {
'obj.a': { //监听对象单个属性a
handler () {
console.log('obj.a changed')
},
immediate: true //该属性会先执行一次handler
// deep: true
}
}
2.4监听对象单个属性
方法一:可以直接对用对象.属性的方法拿到属性
let vm=new Vue({
el:'#app',
template: `
<div>
<p>Obj.Number: <input type="text" v-model="first.number"/></p>
</div>
`,
data(){
return{
first:{
number:5,
}
}
},
watch:{
'first.number':function(newVal,oldVal){ //监听单个属性number
console.log(newVal,oldVal);
}
},
})
Vue核心知识——computed和watch的细节全面分析的更多相关文章
- Vue核心知识-computed和watch的使用场景和方法
https://www.jianshu.com/p/bb7a2244c7ca
- 前端知识扫盲-VUE知识篇一(VUE核心知识)
最近对整个前端的知识做了一次复盘,总结了一些知识点,分享给大家有助于加深印象. 想要更加理解透彻的同学,还需要大家自己去查阅资料或者翻看源码.后面会陆续的更新一些相关注知识点的文章. 文章只提出问题, ...
- Vue核心知识一览
生命周期 beforeCreate : 数据观测 和 初始化事件还未开始 created : ...
- Vuex核心知识(2.0)
Vuex 是一个专门为 Vue.js 应该程序开发的状态管理模式,它类似于 Redux 应用于 React 项目中,他们都是一种 Flux 架构.相比 Redux,Vuex 更简洁,学习成本更低.希望 ...
- Vue大概知识体系和学习参考
Vue大概知识体系和学习参考文档 官方文档学习,参考,借鉴地址:https://cn.vuejs.org/v2/guide/installation.html 菜鸟教程:https://www.run ...
- Vue框架,computed和watch的区别
computed和watch定义 1.computed是计算属性,类似于过滤器,对绑定到视图的数据进行处理.官网的例子: <div id="example"> < ...
- 《Maven实战》关联实际工作的核心知识
通读了<Maven实战>这本书,由于在实际的工作中,对其有一定的操作上的经验.因此,再回头去通读这本书,就能够更加精准的把握里面的核心知识了. 以下我主要从两点去介绍之—— 1> m ...
- 零基础的学习者应该怎么开始学习呢?Python核心知识学习思维分享
近几年,Python一路高歌猛进,成为最受欢迎的编程语言之一,受到无数编程工作者的青睐. 据悉,Python已经入驻部分小学生教材,可以预见学习Python将成为一项提高自身职业竞争力的必修课.那么零 ...
- 详解Vue中的computed和watch
作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...
随机推荐
- Mysql高手系列 - 第7篇:玩转select条件查询,避免踩坑
这是Mysql系列第7篇. 环境:mysql5.7.25,cmd命令中进行演示. 电商中:我们想查看某个用户所有的订单,或者想查看某个用户在某个时间段内所有的订单,此时我们需要对订单表数据进行筛选,按 ...
- 带你深入了解NPM——NPM初学者指南
前段时间,我们邀请了我们“城内”(葡萄城)资深开发工程师刘涛为大家分享了一次干货满满的关于Electron线上公开课,在课程过程中有不少同学对于NPM的概念和用法有一些疑问,所以这次我们希望通过这篇文 ...
- Xshell配置公钥,免密码登陆
下面讲解如何通过xshell配置使用PubKey 来登录服务器,可以减少通过password登录的麻烦. 1.先到用户的家目录, cd ~ 2.执行ssh-keygen -t dsa(or rsa) ...
- Elasticsearch之联想词示例
public class LianXiangWord { private static RestClient client; static { client=RestClient.builder(ne ...
- Vue中的slot(占坑,预留位置)
Vue中的slot(占坑,预留位置) 子模板不使用slot 子模板使用slot 子模板使用使用name属性,且传递data 文件名:Slots.vue //slot组件 <template> ...
- Nuget打包类库及引用
什么是nuget 适用于任何现代开发平台的基本工具可充当一种机制,通过这种机制,开发人员可以创建.共享和使用有用的代码. 通常,此类代码捆绑到"包"中,其中包含编译的代码(如 DL ...
- SpringSecurity自定义UsernamePasswordAuthenticationFilter
UsernamePasswordAuthenticationFilter介绍 UsernamePasswordAuthenticationFilter是AbstractAuthenticationPr ...
- LVM(逻辑卷管理)
一.LVM概念 LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是Linux环境下对磁盘分区进行管理的一种机制,LVM是建立在硬盘和分区之上的一个逻辑层,来提高磁盘分区管 ...
- java使用FileSystem上传文件到hadoop文件系统
import java.io.FileNotFoundException; import java.io.IOException; import java.net.URI; import org.ap ...
- 编译gaia
./rkst/mkimage.sh rk3066-eng -j8 gaia 分别是编译文件路径 编译的输出类型 处理器分配数 待编译模块 //flash gaia1. adb remount2. ad ...