一文速览Vue全栈

阅读原文时间：2023年07月09日阅读：1

原创：新哥Lewis 天道酬勤Lewis 7月7日

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，专注于声明式渲染视图层，结合丰富的生态系统和核心插件，致力于简单灵活快速驱动SPA、MPA等大小型应用。

本文依次介绍 双向数据绑定、计算属性、组件、事件机制、插件机制、前端路由、状态管理和服务端渲染等。

1. Vue实例与数据绑定

Vue.js应用的创建很简单，通过构造函数 Vue 就可以创建一个 Vue 的根实例，并启动 Vue；

var&nbsp;app&nbsp;=&nbsp;new&nbsp;Vue({&nbsp;&nbsp;&nbsp;&nbsp;//选项});

变量 app 就代表了这个 Vue 实例,事实上几乎所有的代码都是一个对象，用来写入 Vue 实例的选项内的。

首先，必不可少的一个选项就是el，el用于指定一个页面中己存在的DOM元素来挂载Vue 实例，它可以是 HTMLElement ，也可以是CSS选择器，比如:

<div&nbsp;id='app'></div>var&nbsp;app&nbsp;=new&nbsp;Vue({&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;document.getElementByld('app')&nbsp;&nbsp;//&nbsp;或者是'#app'});

一个 Vue 应用由一个通过 new Vue() 创建的根Vue实例，以及可选的嵌套的、可复用的组件树组成。

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

建议所有会用到的数据都预先在data内声明，这样不至于将数据散落在业务逻辑中，难以维护。
Vue实例本身也代理了 data对象里的所有属性，所以可以这样访问:

var&nbsp;app&nbsp;=&nbsp;new&nbsp;Vue({&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;'#app',&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a:&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;}});console.log(app.a);&nbsp;&nbsp;//&nbsp;2

除了显式地声明数据外，也可以指向一个己有的变量，并且它们之间默认建立了双向绑定，当修改其中任意一个时，另一个也会一起变化:

var&nbsp;myData&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;a:&nbsp;1};var&nbsp;app&nbsp;=new&nbsp;Vue({&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;'#app',&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;myData});console.log(app.a)&nbsp;;&nbsp;//&nbsp;1//修改属性，原数据也会随之修改app.a&nbsp;=&nbsp;2;console.log(myData.a);&nbsp;//&nbsp;2//反之，修改原数据，&nbsp;Vue属性也会修改myData.a&nbsp;=&nbsp;3;console.log(app.a);&nbsp;//&nbsp;3

每个 Vue 实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。

Vue的生命周期大致分为四个阶段：

beforeCreate（此时date、method和el均没有初始化，可以在此加载loading）
created（此时date和method初始化完成，但是DOM节点并没有挂载，判断是否有el节点，如果有则编译template，如果没有则使用vm.

beforeMount（编译模板，并且将此时在el上挂载一个虚拟的DOM节点）
mounted（编译模板，且将真实的DOM节点挂载在el上）

beforeUpdate（在数据有更新时，进入此钩子函数，虚拟DOM被重新创建）
updated（数据更新完成时，进入此钩子函数）

beforeDestory（组件销毁前调用，此时将组件上的watchers、子组件和事件都移除掉）
destoryed（组件销毁后调用）

在创建时，父子组件的生命周期是：
父组件beforeCreated -> 父组件created -> 父组件beforeMounted -> 子组件beforeCreated -> 子组件created -> 子组件beforeMounted -> 子组件mounted -> 父组件mounted。

在销毁时，父子组件的生命周期是：
父组件beforeDestory -> 子组件beforeDestoryed -> 子组件destoryed -> 父组件destoryed

总之记住，父子组件的生命周期遵循：由外到内，再由内到外。

不要在选项属性或回调上使用箭头函数，vue会自动绑定this的上下文环境。

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

使用双大括号(Mustache 语法)“{{}}”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，

<span>Message:&nbsp;{{&nbsp;msg&nbsp;}}</span>

如果想显示{{}}标签，而不进行替换，使用v-pre即可跳过这个元素和它的子元素的编译过程，例如 :

<span&nbsp;v-pre>{{这里的内容是不会被编译的}}</span>

在{{}}中，除了简单的绑定属性值外，还可以使用JavaScript表达式进行简单的运算、三元运算等，例如 :

<div&nbsp;id='app'>&nbsp;&nbsp;&nbsp;&nbsp;{{&nbsp;number&nbsp;/&nbsp;10&nbsp;))&nbsp;&nbsp;&nbsp;&nbsp;{{&nbsp;isOK&nbsp;?&nbsp;’确定’&nbsp;:&nbsp;’取消’&nbsp;}}&nbsp;&nbsp;&nbsp;&nbsp;{{&nbsp;text.split(’,’).reverse().join(’,’)&nbsp;}}</div>

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span&nbsp;v-once>这个将不会改变:&nbsp;{{&nbsp;msg&nbsp;}}</span>

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render)函数，使用可选的 JSX 语法。

指令(Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for是例外情况)。指令的职责是当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
常用的指令如下：

v-cloak

v-cloak不需要表达式，它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除，
经常和css的 display: none配合使用:

<div&nbsp;id='app'&nbsp;v-cloak>&nbsp;{{&nbsp;message&nbsp;}}</div><style>[v-cloak]&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none;}</style>

当网速较慢 Vue.js 文件还没加载完时，在页面上会显示{ { message }}的字样，直到 Vue 创建实例、编译模板时， DOM 才会被替换，所以这个过程屏幕是有闪动的,只要加上v-cloak就可以避免了。在一般情况下， v-cloak 是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用，但是在具有工程化的项目里，项目的HTML 结构只有一个空的 div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要 v-cloak；

v-once
v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容，例如:

<span&nbsp;v-once>{{&nbsp;message&nbsp;}}</div>

v-once在业务中也很少使用，当你需要进一步优化性能时，可能会用到。

v-html

为了输出真正的 HTML，需要使用 v-html 指令;

var&nbsp;contenthtml&nbsp;=&nbsp;`<span>哈哈大笑

一文速览Vue全栈

1. Vue实例与数据绑定

热门专题