之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的方法 methods,计算属性 computed 和监听器 watch。

现在我们有一个需求,变量 firstName = "hello",变量 lastName = "world",我们需要将这两个变量拼接到在前端展示,最基本的我们可以想到的就是:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{firstName + " " + lastName}}</p>
<p>{{firstName}} {{lastName}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'world',
},
})
</script>
</body>
</html>

以上两种写法很明显是可以这么做的,但是第一种我们在 {{ }} 插值表达式内进行了代码的计算,这是我们不建议使用方式,第二种是写两个 {{ }} 插值表达式,看起来效果不错,但是如果我们要再拼接多个的话在 HTML 代码中就显得冗余了,后期也不好维护。接下来我们看一下如何在方法内实现:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{fullName()}} {{time}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'world',
time: 1
},
methods:{
fullName(){
console.log("计算了一次");
return this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>

上面的代码我们在 methods 里定义了一个 fullName 的方法,然后通过 {{ }} 插值表达式放在 HTML 里,当页面加载的时候直接调用,运行结果如下:

我们在页面加载的时候同时定义了一个 time 的数据,当我们更新这个 time 数据的时候,结果如下:

我们发现当我们更新 time 数据的时候,fullName 方法也调用了一次。这显然不是很理想的。

我们再来看一下利用监听器 watch 方法:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{fullName}} {{time}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'world',
fullName: 'hello world',
time: 1
},
watch: {
firstName() {
console.log("firstName 更改了");
this.fullName = this.firstName + " " + this.lastName;
},
lastName() {
console.log("lastName 更改了");
this.fullName = this.firstName + " " + this.lastName;
}
}
})
</script>
</body>
</html>

结果如下:

我们在 Vue 实例的 watch 属性里定义了两个方法 firstName 和 lastName,watch 属性中方法名和 data 属性里的数据变量名相同,表示会实时监听该数据的变化,如果监听到变化时会实时更新 DOM。

我们先来看一下当跟 methods 方法那样更新 time 数据时的变化:

我们可以看出当 time 数据更新时并没有调用 firstName 和 lastName 里的数据。当我们更新 firstName 和 lastName 的数据时,结果如下:

我们可以看出当我们更新 firstName 或者 lastName 的数据时,fullName 数据才会更新,这说明当数据挂载到 DOM 上的时候会缓存起来,如果数据不更新,则还会继续使用缓存的数据,当数据更新时才会调用 watch 里面的方法,这就比 methods 的方法要好很多。

我们再来看一下计算属性 computed:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{fullName}} {{time}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'world',
time: 1
},
computed:{
fullName(){
console.log("计算了一次");
return this.firstName + " " + this.lastName;
}
}
})
</script>
</body>
</html>

运行结果如下:

我们可以看出跟 watch 比,我们并没有在 data 里定义 fullName 数据,而是在 computed 属性里直接定义 fullName 然后 return 出 firstName 和 lastName 的拼接结果,当页面呈现时,从输出结果可以看出会走一次计算属性,当我们改变 time 数据时:

可以看出 computed 里的方法没有被调用,当我们改变 firstName 或者 lastName 的数据时,结果如下:

从上面的结果可以看出 computed 里面的方法被调用了,这是我们想要的结果,当跟 fullName 有关的 firstName 和 lastName 数据改变时计算属性才会重新计算,当跟 fullName 无关的 time 数据变化时会用之前缓存的数据,这正是我们想要的结果。

以上三种方法进行比较我们可以得知 methods 方法是最不理想的,监听器 watch 和 计算属性 computed 两种方法的运行结果是一样的,但是 计算属性 computed 方法更简单一些。所以在 watch 和 computed 两种方法都能实现的时候我们更推荐使用 computed 方法。

但是上面的 watch 和 computed 两个方法里有个问题,就是 watch 里我们在 data 里定义了一个 fullName 的数据,当我们在更改 fullName 的值时 DOM 会跟着改变,这个跟 firstName 和 lastName 数据更改是一样的。但是当我们在 computed 里我们并没有定义 fullName,当我们更改 fullName 的数据时,如下:

我们发现 DOM 并没有更新,这跟 watch 比起来就显得不友好了,其实在 computed 里有 get 和 set 两个属性,我们 computed 的 fullName 方法改成如下:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{fullName}} {{time}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'world',
time: 1
},
computed: {
fullName: {
get() {
console.log("计算了一次");
return this.firstName + " " + this.lastName;
},
set(value) {
console.log(value);
var result = value.split(" ");
this.firstName = result[0];
this.lastName = result[1];
} }
}
})
</script>
</body>
</html>

运行结果如下:

可以看出当我们通过 get 和 set 就可以改变 fullName 的值使 DOM 更新了。当页面更新的时候先触发 fullName 中的 get 方法,并返回 fullName,当我们改变 time 时,fullName 所依赖的 firstName 和 lastName 并没有更改,所以就 fullName 就会去取缓存的值,在 fullName 的 set 方法里可以传一个 value 的参数,通过打印我们可以看出 value 值就是我们直接改变 fullName 的值,我们就可以通过该值来赋值改变 firstName 和 lastName,这样 fullName 所依赖的 firstName 或 lastName 改变时 DOM 就会实时更新了。

Vue 进阶之路(三)的更多相关文章

  1. Vue 进阶之路(九)

    之前的文章我们介绍了 vue 中父组件之间的传值,本章我们再来看一下父子组件间传值的参数校验和非 Props 特性. <!DOCTYPE html> <html lang=" ...

  2. Vue 进阶之路(八)

    之前的文章我们对组件 component 进行了简单的介绍,本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="e ...

  3. Vue 进阶之路(七)

    之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. <!DOCTYPE html> <html lang="en" ...

  4. Vue 进阶之路(六)

    上篇文章我们分析了一下 vue 中的条件渲染,本篇我们说一下 vue 中的列表渲染和 set 方法. <!DOCTYPE html> <html lang="en" ...

  5. Vue 进阶之路(五)

    之前的文章我们说了一下 vue 的样式绑定,这篇文章来介绍一下 vue 中的条件渲染,先看下面的代码: <!DOCTYPE html> <html lang="en&quo ...

  6. Vue 进阶之路(四)

    之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的样式绑定. 现在我们想要是想这样一个需求,页面上有个单词,当我们点击它的时候颜色变为红色,再点击一次变为原来的颜色 ...

  7. Vue 进阶之路(二)

    之前的文章我们初识了 vue,对其原理,数据绑定和方法进行了简单的演示,本篇将对 vue 插值表达式,v-text,v-html 进行讲解. <!DOCTYPE html> <htm ...

  8. Vue 进阶之路(一)

    vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码, ...

  9. Vue 进阶之路(十)

    之前的文章介绍了 vue 的组件化,本章我们来看一下 vue 中组件的原生事件. <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. 从输入一个URL到页面完全显示发生了什么?

    这是经典的前端问题,主要是对浏览器的工作原理有个理解! 网络通信走的一般是五层因特网协议,详见下图.图片来自于https://images2018.cnblogs.com/blog/882926/20 ...

  2. Quartz学习-- quartz基本介绍和 Cron表达式

    Quartz学习 一. Quartz 大致简介 Quartz 是完全由 java 开发的一个开源的任务日程管理系统 ​任务日程管理系统 换句话说就是: ​ 一个预先确定的日程时间到达时,负责执行任务的 ...

  3. Python的logging日志

    日志级别:critical > error > warning > info > debug,notset级别越高打印的日志越少,反之亦然,即debug : 打印全部的日志(n ...

  4. 第一章 初识数据库Mysql

    初识数据库Mysql(my)   在企业中 percona: 一.数据库基础知识 Mysql是一个开放源代码的数据库管理系统(DBMS),它是由Mysql AB公司开发.发布并支持的.Mysql是一个 ...

  5. 安装ubuntu系统及ubuntu安装Python的几点心得

    一.安装ubuntu系统 1.ubuntu系统是Linux系统的一种,和centos差别不大,但是个人还是建议大家安装ubuntu,它更适合国内使用习惯,换句话说更亲切. 2.安装方法不再赘述,网上有 ...

  6. PAT1126:Eulerian Path

    1126. Eulerian Path (25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue In grap ...

  7. springcloud(十):服务网关zuul(转)

    前面的文章我们介绍了,Eureka用于服务的注册于发现,Feign支持服务的调用以及均衡负载,Hystrix处理服务的熔断防止故障扩散,Spring Cloud Config服务集群配置中心,似乎一个 ...

  8. 【线程系列四】[转]监听器-java同步的基本思想

    转自:http://ifeve.com/think-in-java-monitor/ 如果你在大学学习过操作系统,你可能还记得监听器在操作系统中是很重要的概念.同样监听器在java同步机制中也有使用, ...

  9. 简历HTML网页版

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  10. linux 安装python3

    下载python安装包 https://www.python.org/ftp/python/3.6.3/Python-3.6.3.tgz (可选则自己想要的版本) 下载好之后上传到linux系统,开始 ...