Vue 2.0 基础了解

背景

Vue 我是从去年工作才认识到，当时使用的版本大概是 1.0 版本，对官方的教程文档花时间大致了解了下

今年由于 Vue 升级到 2 版本以上，一直在更新，所以工作使用的版本全面升级到 2.0 版本

同事碰到了几个问题，我也一时找不出原因在哪里，又重新开始对 Vue 2.0 版本教程进行学习

以下是解决 Vue2.0 版本工作时遇到的问题以及了解 Vue 2.0 版本的一些要点

本篇阅读时间 10 分钟

资料

• Vue 2.0 版本
• SUI Mobile 省市区控件

问题点

1. 基于 input 元素进行的省市区选择控件时，无法显示该控件同时 value 值无法更新数据问题
   

2. 在单选列表项中，多次点击其中一项数据，而 value 值没有进行更新问题

第一个问题点思路

当时使用的是 SUI 的省市区控件，我进入官网重新了解整个控件需要的内容信息， 因为我个人记忆力比较差，十天半个月没用过的东西，基本上就剩下个索引了

然后跟代码进行校验和比对，发现没什么问题。开始了解业务代码上的问题，进行调试

由于工作内容有点杂，你懂得，对业务代码的了解是在第三天开始进行的，因为当时心情不错，就来看看这个问题的原因到底出现在哪里

跟同事确认了下是否为该问题后，对业务进行的了解，发现问题点可能是 在实例化 Vue 对象后，没有对 SUI 省市区控件进行初始化的原因 对业务代码进行调试后工作正常，那这个问题就已经解决了一半

而另一半的问题倒腾了大半天都不得而终，可以确定出现的问题点范围在 Vue 方面，决定重新了解下 Vue 的教程内容，俗语说『温故而知新』

问题点的解决方法会在下面的知识点中说明

第二个问题点思路

这个问题从表面看，是数据没有进行更新，所以从业务点代码进行了此数据的数据输出

从浏览器开发工具上查看，进行操作时的数据是否存在变化，结果是此功能的数据在前几次都是正常的，平均从第三次开始就无法进行数据更新

当时对于这个问题很纳闷，有点无从下手的感觉，然后对这个功能的实现场景进行了解，猜测可能也存在初始化的问题，因为触发这个功能总要打开一个新页面

这个功能也是基于实例化 Vue 对象来实现的，直接判断该 Vue 组件是否存在，可惜问题仍没有解决，但是可以确认每次点击都会进行初始化该示例

由于该 Vue 实例是放置在一个函数中，而该函数是每次点击都会触发的一个函数，我开始查看函数第一次触发时有没有存在相关的空变量，然后通过第一次是否为空的变量来判断，此 Vue 示例进行实例化。幸运的是问题得到了解决

问题点归结

• 当发现一个问题后，我个人是先还原该问题，对这个问题查看后，根据经验看是否可以解决并且去尝试

• 当不能解决后，对此问题出现错误的一个范围进行缩小，查看上下文代码关系是否可以解决

• 以上都不能解决，我才去关注这个问题点的原理到底是怎么回事，再根据原理来推测解决方法

• 如果根据原有的原理也不能解决的话，我会绕一条远路，绞尽脑汁的来一条嗖方法进行解决，或者变更此功能实现进行解决

• 还不行的话求助同事、朋友或者其他方式

对 Vue 基础了解

在 Vue 的官方教程中，除了一些常规的写法和使用方式外，对以下几个功能特性比较感兴趣

Vue 的计算属性是依赖属性变化的，不是依赖响应式的

先来理解『计算属性』，可以把它当成一个变量来说明，整个结构体大概是 普通的 js 函数 返回一个变量 ，关键点是整个变量必须要返回，或者说呈现给页面的只是一个变量而已，而你对变量进行如何函数式的处理，你可以进行功能性的为所欲为

然后说整个计算属性是根据依赖属性变化的，可以解释为 计算属性是根据在自身函数体内所包含其他变量存在数据变化而自身也随之变化的

举个官方栗子： 假如此计算属性依赖一个初始化好的一个时间变量，那计算属性的函数只执行一次，只有在时间变量本身变化时，计算属性才随之变化

不像普通函数一样，触发一次，我就执行一次，不是响应式这种。

然后我感觉就像发现一个新大陆一样，改变了之前的观念。因为之前的理解就是，写函数，触发就会进行执行。也就是需要执行，触发就可以了。

而这个计算属性，当我变更依赖的变量后，计算变量自动就可以执行了，不需要我再次调用执行此『计算属性』的函数了。至少减少了很多次的显式函数调用

计算属性是数据保存在缓存中的，函数属性是重新渲染后初始化的，重复执行函数

大致的意思在上面的知识点已经说明，主要说一下，计算属性的数据是放置在缓存中，如果你允许使用缓存的话，禁用缓存最好使用 method 来代替，这是官方的情况说明

在使用计算属性的时候，也有个相同的功能可以使用，就是 Watched 属性，Watched 属性是监控其他数据变动而变动的，是命令式的 watch 回调，说的到底是啥意思，其实我也不大明白，总之两个功能都可以使用，而官方推荐使用计算属性来操作，因为这样做是更好的想法罢了。

总之计算属性最终表达的是一个属性、一个变量，不是一个函数

eg :

var textName = '2';           //这是计算属性的结果、也是一个变量
var textName = function() {   //这是函数体，不是计算属性
return '2';
}

计算属性默认只有 get 属性，可增加 set 属性

eg ：

//...
computed: {
	fullName: {
		get: function() {
			return this.firstName + "" + this.lastName;
		},
		set: function(txt) {
			this.firstName = txt + "ok";
		}	
	}
}
//...

Watched 属性是在数据发生改变时运行

Watched 属性可调用自身 Vue 示例的函数，与计算属性相比较，适合执行异步操作或者开销较大的操作

官方说法是： 使用 Watched 属性允许我们执行异步操作（访问一个 API）,限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。

假如 if 指令判断元素过多，使用 template 做包装处理

if 指令一般是放置在 html 元素上加以判断的，如果同块页面中需要判断的 html 元素过多，都是重复的 if 指令难免有些繁琐以及维护性较差，而 template 标签解决了这个问题，全部包含在 template 标签内做 if 指令判断，功能很赞，虽然我没有用过 Vue 以外的『前端框架』

eg :

<template v-if="true">
	<h1>大伟哥</h1>
	<p>男</p>
	<p>很帅</p>
</template>

在 if else 指令中的元素默认是复用的，英文使用同一 key，如果元素不复用需要添加唯一的 key 信息

默认 key 是复用的，可以增加性能，但是在实际业务中需要两个独立的元素，一定要切记此处，增加唯一的 key 信息，避免不必要的 bug 产生

if 指令有较高的开销，show 指令有较高的渲染开销

如果频繁的切换使用 show 指令，运行时较少改变使用 if 指令

Vue 实例与组件分离，可更好的组合模块区域，例如单个 Vue 实例对应多个复用的组件

之前使用 Vue 实例都是一个实例对应一块代码，重复这样操作，发现这个功能以后，一下把之前的写法扩充了很多，一个完整的 Vue 实例对应多个组件，方便代码阅览和修改，避免了不必要的繁琐，在实际代码中一定要多多使用该方式

for 指令使用 key 方法可以提升性能

没什么好说的，使用 for 指令时尽量带上 key 标签就是了，除了循环的数据真的够简单，或者需要其他业务可不使用 key 标签

数组在触发视图更新的时候可使用多个变异方法以及过滤方法

过滤方法也是重塑数组的方法，都是使用新数组替换旧数组，有 filter()、concat()、slice()等等....

v-on 指令可以执行一些简单的 js 代码

这个是我之前从来没有想过的，如下示例

//var count = 0;
<div id="demo1">
	<button v-on:click="count + 1">add + 1 </button> 
</div>

而且事件可以添加事件修饰符、键盘修饰符，可以更好的控制一些方法的精细度或者其他，这些修饰符都是从原生 js 存在的

v-model 指令语法糖

v-model 指令使用更新元素的 value 值，而这个指令只不过是一个语法糖，是由以下的代码精简出来的

<input v-bind:value="txt" v-on:input="txt = $event.target.value" >

实际上是通过 input 事件获取到当时的变量值，然后在绑定到这个 input 控件上。也就是监控 oninput 事件来改变绑定的值

** 而之前的问题一的后半部答案也在其中，这个需要说明以下 SUI 选择省市区控件的特性，使用此控件会将普通的 input 元素变为只读状态，然后通过自身的控件写法来触发控件功能，并改变此 input 的 value 值，这样处理的话实际上 v-model 指令根本没有监控到 value 值的变化，因为根本没有走监控的 oninput 实际，而是通过 onchange 事件来改变 value 值的，这也就是解释了为什么控件已经变更了数据，而 Vue 的 v-model 没有去更新数据值 **

** 幸运的是 v-model 指令提供了 .lazy 指令，而此指令是监控 onchange 事件而不是 oninput 事件，所以问题点一的后半部问题就解决了 **

<input v-model.lazy="txt" >	  //加上 .lazy 指令即可

总结

Vue 的功能和特性以及父子间的组件都很不错，下一步对组件这一部分进行精修，更好的运用好组件

本篇的 Vue 基本部分说明，耗费了大概一下午的时间，中间当然包含作其他事情，但是当写到这里的时候，外面真的已经很黑很黑了

本篇中，很多官方定义都加了个人色彩理解，不一定适合你，仅当参考理解就好

本人真的有拖延症，能静下心来把本篇写完，能鼓励多鼓励，能不批评就别批评