怎么在控制台打印vue实例对象_从零玩转Vue全家桶（二）

点点关注不迷路，江哥带你上高速。

本系列文章为Vue.js的学习，《Vue全家桶+项目实战》和《手写Vue全家桶》系列课程已完结，请在知播渔官网(www.it666.com)上点击查看学习哦。

Vue 模板语法、计算属性、生命周期

1. Vue 模板语法

Vue.js 是建立在视图层的技术。所以 Vue.js 中的模板系统是非常重要的功能之一。

1.1 什么是模板？

当获取到后端数据后，我们会把它按照一定的规则加载到写好的模板中，输出成在浏览器中显示的 HTML，这个过程就称之为渲染。

• 模板系统

  任何一个用于 Web 编写或者面向使用者的应用必定有模板的存在。模板从根本上规定了一个系统应当以怎样的交互形式和 UI 风格面向使用者，而遵循这套模板进行设计和完善功能，也是软件开发的基本模式。

• 模板引擎

  通过不同的数据和内容，加上一个统一的模板(格式)，就可以得到一个属于一个用户或者一个内容的定制页面，不但减少了大量的编码量，也极大地方便了将来可能对于样式的更新换代。

  例如在课程《从零玩转 CSS 预处理器+项目实战》中使用art-template模板引擎来渲染数据。

1.2 Vue.js 中模板语法

作为 MVVM 类型的框架，Vue.js 采用的是数据驱动视图绑定引擎，通过前后端的 bind 状态，已知后端的数据更新，前端相关的显示也会同时改动。

为什么要使用模板的原因有以下几点：

• 前端模板引擎要担负 XSS 的防范；
• 前端模板引擎要支持片段的复用；
• 前端模板引擎要支持数据输出时的处理；
• 前端模板引擎要支持动态数据；
• 前端模板引擎要与异步流程严密结合。

Vue.js 允许开发者采用简洁的模板语法来 声明式 地将数据渲染进 DOM 。即就是将模板中的文本数据放入 DOM 中，可使用 mustache 语法{{}}完成。

1.2.1 文本插值

数据绑定最基础的形式就是文本插值，使用的是双大括号标签{{}}，为“Mustache”语法。例如：

"app">知播渔官网： {{msg}}





渲染结果

解析

• 实例 vue 中的 msg 属性的值将会替换{{}}中的 msg，并且此时如果修改数据对象中的 msg 属性，DOM 也会随之更新。

• 当绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

  在控制台修改实例 vue 中的 msg 属性为'www.itzb.com'时，界面结果如下图

1.2.2 绑定表达式

Vue 支持 JavaScript 的所有表达式

"app">

{{name}}

{{age + 1}}

 //19

{{age == 18 ? 'true' : 'false'}}

 //true

{{msg.split("").reverse().join("")}}

 //moc.666ti.www





注意：每个绑定都只能包含单个表达式。对于复杂的表达式可以放在计算属性computed 里面。

1.2.3 编程范式：命令式与声明式

命令式编程

过去给一个元素设置样式：

• 创建一个 div 元素，设置 id 或 class 属性；

• 定义一个变量获取该元素；

• 给该变量设置样式或者绑定事件。

声明式也就是，需要写好每一步的代码在哪里(where)做什么(what)，如何实现(how)

'main'>'icon' src='image/other.jpg'> //1.创建元素




'tips'>你拍了拍“某靓仔”




可以看出：我们之前学的 jQuery 就是典型的命令式编程，需要操作界面上的 DOM 元素。不断的创建、销毁元素，性能较差。

(此处应该也有一道前端性能优化面试题)

注：本示例完整代码请在B站(李南江老师)拍一拍实现视频上观看

声明式编程

在 Vue.js 中，定义好用于要挂载管理的元素和数据之后，在{{}}中写好需要渲染的数据，无需关心 vue 实例如何处理管理元素并渲染出数据。

"app">

{{msg}}





2. Vue 计算属性

2.1 computed 的使用

Vue 提供计算属性 computed 用于处理不方便放在模板语法内的复杂逻辑表达式，同时 computed 有缓存功能，可防止复杂计算逻辑多次调用引起的性能问题。

"app">

{{name}}

{{age + 1}}

{{msg2}}





注意点:

• 在模板中放入太多的逻辑会让模板过重且难以维护，因此对于任何复杂逻辑，都应当使用计算属性

  (例如上述中的翻转字符串，应该放在计算属性值中处理比较合适)

• 虽然在定义计算属性的时候是通过一个函数返回的数据，但是在使用计算属性的时候不能在计算属性名称后面加上()，因为它是一个属性不是一个函数(方法)

2.2 computed 和 methods 区别

使用methods处理：

"app">

{{msg1()}}

{{msg1()}}

{{msg1()}}





• 结果：

• 解析：连续调用三次msg1方法，控制台中打印了三次“msg1 函数被执行了”。

---

使用computed处理：

"app">

{{msg2}}

{{msg2}}

{{msg2}}





• 结果：

  

• 解析：连续调用三次msg2方法，控制台中打印了一次“msg2 函数被执行了”。

---

区别

• methods 用于存储监听事件回调函数；computed 用于定义计算属性的
• 使用计算属性的时候不能在计算属性名称后面加上()，使用方法的时候需要再方法名称后面加上()
• 每当触发重新渲染时，调用方法将总是再次执行函数；而计算属性不会再次执行函数
• 函数“不会”将计算的结果缓存起来，每一次访问都会重新求值；计算属性“会”将计算的结果缓存起来，只要数据没有发生变化，就不会重新求值

应用场景

• methods 没有缓存，所以每次访问都要重新执行。当不需要缓存功能，就使用 methods；
• computed 比较适合用于计算不会频繁发生变化的的数据。

2.3 计算属性的 setter 和 getter

对于计算属性的 setter 和 getter，一般的计算属性默认只是 getter，不过在需要时也可以提供一个 setter

"app">

{{fullName}}





计算属性中的 setter

"app">

{{fullName}}





getter 函数将作用在属性 vue.fullName 的 setter 上，在浏览器控制台输入vue.fullName='Foo Bar'，此时 setter 被调用，vue.firstName和vue.lastName也会相应地被更新。

2.4 计算属性的特点小结

• 计算属性使数据处理结构清晰
• 依赖于数据，若数据更新，则处理结果自动更新
• 计算属性内部this指向 vue 实例
• 模板调用时，直接写计算属性名
• 常用的 getter 方法用于获取数据，setter 方法改变数据
• 相较于 methods，不管依赖的数据是否改变，methods 都会重新计算，依赖数据不变的时候，computed 从缓存中获取，不会重新计算。

3. Vue 生命周期

Vue 实例在被创建之前都要有一个初始化过程，有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染 → 更新 → 渲染到卸载等的一系列过程，被称为 Vue 的生命周期。通俗说 Vue 实例从创建到销毁的过程，就是生命周期。

3.1 钩子函数

Vue 生命周期可以分为 8 个阶段：beforeCreate(创建前)，created(创建后)，beforeMount(载入前)，mounted(载入后)，beforeUpdate(更新前)，updated(更新后)，beforeDestroy(销毁前)，destroyed(销毁后)，Vue 官方称这些为钩子函数。

• beforeCreate：在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化。
• created：在实例创建之后调用。此时已完成数据观测、事件方法，但尚未开始 DOM 编译，即未挂载到 document 中。
• beforeMount：在 mounted 之前运行。
• mounted：在编译结束时调用。此时所有指令已生效，数据变化已能触发 DOM 更新，但不保证$el 已插入文档。
• beforeUpdate：在实例挂载之后，再次更新实例(如更新 data)时会调用该方法，此时尚未更新 DOM 结构。
• updated：在实例挂载之后，再次更新实例并更新完 DOM 结构后调用。
• beforeDestroy：在开始销毁实例时调用，此刻实例仍然有效。
• destroyed：在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁。

3.2 生命周期图解

如图所示的 Vue 生命周期，Vue 实例从创建到销毁的整个过程。使用 new Vue()实例化，需要传入一些配置参数，实例创建之前调用 beforeCreate()。然后进行数据的检测和监听的配置，init Events 初始化事件，初始化写在 HTML 模板上绑定的事件 methods。接下来检测是否有元素挂载点，如果没有元素挂载点，通过 mount 函数触发；如果已经触发或者有 el 挂载点，检测是否有 template 选项。模板组件可能没有，如果有，使用 render function 函数编译；如果没有，使用 outerHTML 作为模板。下面执行 beforeMount 生命周期钩子，处理完成后监测 el 对应的 dom 元素是否已经加载到文档流中，是否能获取到。如果能获取到则执行 mounted 检测数据；如果数据更新，则执行 beforeUpdate。更新后有一个数据的响应机制，执行 updated。如果实例销毁，在实例销毁之前，会解除事件绑定、数据监听、销毁组件等。

3.3 生命周期应用

• created：进行 AJAX 请求异步数据的获取、初始化数据。
• mounted：挂载元素内 DOM 节点的获取。nextTick：针对单一事件更新数据后立即操作 DOM。
• updated：数据更新的统一业务逻辑处理。
• watch：监听具体数据变化，并做相应的处理。