Vue 进阶语法和生命周期

a. 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 根Root实例 开始的:

// 创建Vue实例
var vue = new Vue({// 选项对象
});

b. 当创建一个 Vue 实例时，你可以传入一个选项对象, 选项对象包括(例举):

DOM (视图):
- el: 渲染的html元素
- template: 渲染的模板(组件开发时用)
- render: 渲染函数(组件开发时用)
数据/方法
- data: 数据
- props: 组件属性((组件开发时用))
- methods: 方法
- computed: 计算属性
- watch: 监控属性
生命周期钩子(不同阶段自动回调的函数)
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestory
- destoryed

c. Vue实例常用的方法:

vm.$mount() 挂载方法 (常用于组件开发)

如果 Vue 实例在实例化时没有指定 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。

可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
vm.$emit() 定义触发当前实例上的事件 (常用于组件开发)

触发当前实例上的事件。附加参数都会传给监听器回调。

参考官方api: https://cn.vuejs.org/v2/api/

16、Vue：生命周期【了解】

目标: 了解vuejs的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程: 创建实例，装载模板，渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期钩子函数:

beforeCreate：实例初始化之后调用（要啥啥没有，data和methods都拿不到）
created：实例创建完成后调用（data和methods都拿到了）
beforeMount：挂载开始之前调用**（拿到了html元素作为模板，但是还没有做数据挂载）**
mounted：挂载完毕之后调用
beforeUpdate：数据更新之前调用
updated：数据更新之后调用
beforeDestory：实例销毁之前调用。在这一步，实例仍然完全可用。
destoryed：实例销毁之后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

生命周期图示:

vm.$el: Vue 实例使用的根 DOM 元素。

Vue在实例化的过程中，会调用这些生命周期的方法，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了那些操作，我们先看下面执行的例子:

demo_13.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vuejs生命周期钩子</title><script src="node_modules/vue/dist/vue.js"></script>
</head>
<body><div id="app">{{message}}</div><script type="text/javascript">var vm = new Vue({el : '#app',data : {message : 'VueJS 您好!'},beforeCreate : function() {showData('1.实例初始化之后', this);},created : function() { // 比较重要(发异步请求加载初始化数据)showData('2.实例创建完成后', this);},beforeMount : function() {showData('3.挂载到dom前', this);},mounted : function() {showData('4.挂载到dom后', this);},beforeUpdate : function() {showData('5.数据变化更新前', this);},updated : function() {showData('6.数据变化更新后', this);},beforeDestroy : function() {vm.test = "3333";showData('7.vue实例销毁前', this);},destroyed : function() {showData('8.vue实例销毁后', this);}});function showData(process, obj) {console.log(process);console.log('data 数据：' + obj.message)console.log('挂载的对象：')console.log(obj.$el)console.log('真实dom结构：' + document.getElementById('app').innerHTML);console.log('-------------------------------')}vm.message = "good...";vm.$destroy();</script>
</body>
</html>

小结

页面初始化数据，可以在哪些钩子函数中提前加载?
- created、beforeMount、mounted 三个钩子函数(发送异步请求，获取后台数据)

17、Vue：computed计算属性

目标: 掌握compued计算属性的使用

在插值表达式中使用js做运算非常方便。但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，这个时候就可以用计算属性。

使用语法:

computed: {key1: function(){return "计算后的数据";},key2: function(){return "计算后的数据";}
}

demo_14.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vuejs计算属性</title><script src="node_modules/vue/dist/vue.js"></script>
</head>
<body><div id="app"><!-- 插值表达式 --><h2>{{new Date(milliseconds).getFullYear() + "年"+ new Date(milliseconds).getMonth()+ "月" + new Date(milliseconds).getDate()}}</h2><!-- 计算属性 (注意：它不是一个函数) --><h2>{{time}}</h2></div><script type="text/javascript">var vue = new Vue({el : '#app', // 渲染的html元素data : { // 数据对象milliseconds : 1573878276849,},computed : { // 计算属性time (){ // time属性const date = new Date(this.milliseconds);return date.getFullYear() + "年" + date.getMonth() + "月" + date.getDate();}}});</script>
</body>
</html>

注意:

计算属性本质是函数，但是一定要返回数据。页面渲染时，只能把这个函数当成一个属性来使用。

计算属性需要我们自己主动调用，生命周期钩子函数不会主动调用计算属性。

18、Vue：watch监控属性

目标: 掌握watch监控属性的使用

watch可以帮我们监控数据对象中的属性值发生改变。

使有语法:

watch : {key1 : function(newVal, oldVal){},"obj.key1" : function(newVal, oldVal){},obj : {// 开启深度监控(对象)deep : true,// 监控函数，必须用这个函数名handler : function(obj){}}
}

demo_15.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vuejs监控属性</title><script src="node_modules/vue/dist/vue.js"></script>
</head>
<body><div id="app"><input type="text" v-model="message"/><br/><h2>{{message}}</h2><input type="text" v-model="user.name"/><br/><input type="text" v-model="user.age"/><br/><h2>姓名: {{user.name}} ==> 年龄: {{user.age}}</h2></div><script type="text/javascript">var vue = new Vue({el : '#app', // 渲染的html元素data : { // 数据对象message : '',user : {name : '', age : ''}},watch : { // 监控属性message : function(newVal, oldVal){console.log("新值:" + newVal + ",旧值:" + oldVal);},"user.name" : function(newVal, oldVal){console.log("user.name:" + newVal + ",user.name:" + oldVal);},user : {// 开启深度监控，可以监控到对象属性值的变化deep : true,// 监控处理函数handler : function (obj) {console.log("name:" + obj.name + ",age:" + obj.age);}}}});</script>
</body>
</html>

监控message变化：
监控user对象变化：

Memorial Day is 509 days
I miss you
xiaokeai