Vue.js基础

vue实例的生命周期

vue实例的生命周期示意图

第一个生命周期函数

beforeCreate

当一个vue的实例在初始化时间和生命周期结束以后 vue实例将会自动执行第一个生命周期函数beforeCreate可以通过如下代码来实践

第一个生命周期函数

到浏览里打开开发者工具 将看到控制台里输出了beforeCreate 也就是这个函数确实被自动执行了 代码里也确实没有任何调用方法的痕迹

第二个生命周期函数

created

当Vue实例执行完了第一个生命周期函数并且初始化了一些外部注入以及一些绑定事件以后 会继续自动执行第二个生命周期函数created 我们可以在编辑器里编辑如下代码 并在浏览器里打开控制台观察结果可以看到输出了created 第二个生命周期函数

第三个生命周期函数

beforeMount

当Vue实例自动执行完第二个生命周期函数以后 Vue会询问是否有el也就是挂载点 有的话将继续询问是否有template也就是模板 如果没有模板的话 vue实例会以挂载点外部的HTML标签作为模板来 在数据和模板还没有渲染到网页上之前 会自动执行第三个生命周期函数 可以在编辑器里编辑以下代码 并观察结果

第三个生命周期函数
浏览器运行结果
这个时候可以看到整个<div>标签里空的 也就是证明了vue在自动执行这个生命周期钩子的时候是还没在页面上渲染数据和模板的

第四个生命周期函数

mounted

当Vue实例自动执行完第三个生命周期函数的时候并且页面已经挂载完成了以后 Vue会自动执行第四个生命周期函数 通过代码可以验证

第四个生命周期函数

通过观察浏览器结果可以发现 这个时候页面确实已经挂载完成 并且自动执行了这个生命周期函数

浏览器结果

第五个和第六个生命周期函数

beforeDestroy和destroyed

这两个生命周期函数和前面的区别在于 Vue实例并不会自动执行 而是需要手动执行最后一个destroyed生命周期函数以后才会自动执行beforeDestroy生命周期函数

beforeUpdate和updated

这两个生命周期函数和上面的同理 当一个Vue实例的内容发生变化了 才会执行updated 但是在执行updated之前还会自动执行一个beforeUpdated生命周期函数

methods、watch、computed

在一个Vue实例中还有这三个非常重要属性 而且各有不同 假设现在有一个需求是已知一个人的姓和名 但是在页面上需要显示的是这个人的全名 分别用这三个方法来实现并且看下有什么不同吧

methods

methods
当我们实现了一下代码以后 在浏览器里可以看到这样的结果 运行结果
当我们试图更改Vue实例中age的值的时候 会发现 页面重新渲染的时候会又一次的执行了fullName的函数 也就是说 methods并没有缓存机制 会在每一次页面重新渲染的时候被调用 运行结果

computed

在Vue实例中有一个计算属性 也就是computed 利用computed同样也可以实现上述功能 computed

与methods不同的是 computed拥有缓存机制 也就是说 当计算的值没有发生变动的时候 他始终只调用了一次计算结果的函数 可以通过以下方式来验证

缓存机制 可以看到 这里我们修改了实例中age的值 页面更新了以后 也只是计算了一次 因此 computed是拥有缓存机制的

watch

另一个Vue实例里非常重要的属性是watch 它同样也有缓存机制 只是如果同样要实现一个方法 watch就显得更麻烦一些并且会造成代码的冗余 因为watch的工作原理是 你可以设置一个值让他去监听 当这个值发生变化了的时候 页面也随之重新渲染 可以看下面的代码 watch

computed中的set和get

Vue实例中的computed是有set和get方法的 其中 get方法用于计算得到一个新的值 set方法用于 当你改变了某个值的时候 重新调用get方法来获取新值 可以通过如下代码来验证

get和set

可以看到在vue实例中的firstName和lastName通过get方法得到了fullName 同时 如果这个时候 我们通过set方法去改变fullName 同时vue实例里的firstName和lastName也会跟着随之发生变化

set方法

其他的一些细节

1.在vue中 插值表达式{{}}等于js表达式里的innerHTML
2.v-text和插值表达式等价
3.v-text和v-html的区别在于 v-text并不会转译html标签 v-html则会转译