Vue 进阶之路（三）
之前的文章我们已经对 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 进阶之路（三）的更多相关文章
- Vue 进阶之路（九）
之前的文章我们介绍了 vue 中父组件之间的传值,本章我们再来看一下父子组件间传值的参数校验和非 Props 特性. <!DOCTYPE html> <html lang=" ...
- Vue 进阶之路（八）
之前的文章我们对组件 component 进行了简单的介绍,本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="e ...
- Vue 进阶之路（七）
之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. <!DOCTYPE html> <html lang="en" ...
- Vue 进阶之路（六）
上篇文章我们分析了一下 vue 中的条件渲染,本篇我们说一下 vue 中的列表渲染和 set 方法. <!DOCTYPE html> <html lang="en" ...
- Vue 进阶之路（五）
之前的文章我们说了一下 vue 的样式绑定,这篇文章来介绍一下 vue 中的条件渲染,先看下面的代码: <!DOCTYPE html> <html lang="en&quo ...
- Vue 进阶之路（四）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的样式绑定. 现在我们想要是想这样一个需求,页面上有个单词,当我们点击它的时候颜色变为红色,再点击一次变为原来的颜色 ...
- Vue 进阶之路（二）
之前的文章我们初识了 vue,对其原理,数据绑定和方法进行了简单的演示,本篇将对 vue 插值表达式,v-text,v-html 进行讲解. <!DOCTYPE html> <htm ...
- Vue 进阶之路（一）
vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码, ...
- Vue 进阶之路（十）
之前的文章介绍了 vue 的组件化,本章我们来看一下 vue 中组件的原生事件. <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- 利用arcserver 自带tomcat实现上传shapefile、cad等文件，然后用soe解析。
一.功能实现分析 1.soe中传入指定路径目录和文件名就能读取shp.cad并解析,然后返回JSON格式数据给flex端生成图形.(soe读取的是本地绝对路径) 2.所以首先要上传文件到soe发布所在 ...
- SpringBoot cache-control 配置静态资源缓存 （以及其中的思考经历）
昨天在部署项目时遇到一个问题,因为服务要部署到外网使用,中间经过了较多的网络传输限制,而且要加载arcgis等较大的文件,所以在部署后,发现页面loading需要很长时间,而且刷新也要重新从服务器下载 ...
- 使用MongoDB存储集合的一些问题
这两天在工作中被Mongo集合存储给整得头大,当然也是我的认知太浅,所以下面我来分享下我所遇到的这个问题希望有大佬能给出更好的解决方案, 1.需求: 存储一个从前端接收未知数据类型的集合 例: 由于是 ...
- 关于input的一些问题解决方法分享
前言 input是我们接受来自用户的数据常用标签,在前端开发中,相信每个人都会用到这个标签,所以在开发过程中也时候也会遇到一些问题,本文的内容是我在跟input相爱相杀过程中产生的,在此记录分享一下. ...
- echart css样式弄了几个月了，样式一直都没有好好解决，好激动
legend 图例,每个图表最多仅有一个图例.try this » 名称 默认值 描述 {string} orient 'horizontal' 布局方式,默认为水平布局,可选为:'horizonta ...
- OOP编程七大原则
OCP(Open-Closed Principle),开放封闭原则:软件实体应该扩展开放.修改封闭.实现:合理划分构件,一种可变性不应当散落在代码的很多角落里,而应当被封装到一个对象里:一种可变性不应 ...
- Kali Linux远程连接Windows服务器
前言: 为了在Kali上远程连接Windows系统的服务器我们需要安装两个工具,rdesktop和tsclient.另外,我们从主机服务商那里购买的Windows操作系统的服务器都是默认开启了远程连接 ...
- Markdown编辑器editor.md的使用---markdown上传图片
http://kindeditor.org/ 确定下有没有查找替换功能 http://pandao.github.io/editor.md/ http://pandao.github.io/edito ...
- 笔记一下NODEJS建站
1:npm的使用 -g的包安装用于命令行 --save用于建立依赖 建立依赖后的包只要使用npm install就可以直接全部安装 2:EJS和JADE模板 3:使用Mongoose对Mongodb进 ...
- 浅谈前端中的mvvm与mvc
用了vue这么久,却没有认真的关注mvvm与mvc,着实汗颜.趁着周末刚好看了一下网上的文章还有书籍,简单的谈一下我的理解. -以下图片均摘自网络. 一.MVC 特点:单项通讯 视图(View):用户 ...