1. 声明周期/钩子函数
声明周期：从出生到死亡
- beforeCreate --出生之前
- created – 出生后
- beforeMount – 挂载之前
- mounted – 挂载后
- beforeUpdate – 更新前
- updated – 更新后
- beforeDestroy – 死亡前
- destroyed – 死亡后
钩子函数：初始化时会调用很多方法，这些方法叫做钩子函数。钩子函数是vue提供给我们在vue生命周期不同的时刻进行操作的函数；可以理解为回调，在某个声明周期结束后调用的函数；
let vm = new Vue({ //根实例，初始化时会调用很多方法，这些方法叫做钩子函数，钩子函数只是个名字，可以理解为回调
el:'#app', //挂载，也可以在实例外面使用 实例vm.$mount('#app') 这样挂载
beforeCreate(){ // 1. 此方法一般用不到
// 这一步只是初始化完了一些内部的事件和声明周期，data 和methods 还没有
},
created(){ //2. 初始化操作，获取ajax
//这一步之前完成了数据注入，和响应化数据，此时vue实例已经代理了数据
console.log(this.$data); //可以通过 this.$data 获取数据
},
beforeMount(){ //编译前-没有实际意义
//3. 要保证有编译的元素，如果没有的化，就不会往下走
},
mounted(){
//真实dom渲染完了，可以操作dom了
},
beforeUpdate(){ //当依赖的数据更改后才能更新，不依赖的更新了，没有反应，一般用不到，用watch更好用
//更新之前
},
updated(){
//更新之后
},
// 虚拟dom是一个对象，会拿新对象和老对象进行比较
beforeDestroy(){ //要调用 vm.$destroy(); 才会销毁
//销毁前，移除监听者 和时间监听等，此时再修改数据等待都不会再变化了，没有watch了
// 可以在这里销毁前，清除定时器 或者 清除事件绑定
},
destroyed(){
//销毁后
},
template:'<di>{{a}}</div>', //4. 如果有template 属性，就会用模板替换掉外部html ，只要有此属性，#app 中的内容就没有任何意义了
//模板需要有且只有一个根元素，不能是文本节点；编译后模板内容会替代 #app 元素
data:{
a:'red',
}
})
2. 实例上的方法
$ 是指自己的属性，
this.$refs 所有有ref属性元素的集合-获取dom
<input type="text" ref="input1"/>
console.log(this.$refs.input1.value)
console.log(this.$refs.myul.children.length);
this.$data vm上的数据
this.$watch 监控
vm.$watch('someObject', callback, {
deep: true
})
this.$set 后加的属性实现响应式变化
this.$el 当前el元素
his.$options vm实例上的所有 属性 el/data/filters/components等等
this.$nextTick 保证dom渲染完后再执行后面的代码，因为dom渲染是异步的
this.$nextTick(()=>{
console.log(this.$refs.myul.children.length);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="shortcut icon" href="#" type="image/x-icon">
</head>
<body>
<div id="app">
<p ref='myp'>{{a}}</p>
<p ref='myp'>{{a}}</p>
<hr>
<ul ref='myul'>
<li v-for = 'a in arr' ref='myli'>{{a}}</li>
</ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
a:'hello',
arr:[1,2,3],
},
mounted(){ //mounted 用来操作dom
// console.log(vm); 这样写会报错：ReferenceError: Cannot access 'vm' before initialization
this.$nextTick(() => { //异步方法，等待渲染dom完成后再获取vm
console.log(vm);
})
console.log(this.$refs.myp);
console.log(this.$refs.myli); //(3) [li, li, li]
// 如果dom元素不是通过v-for循环出来的，只能获取到一个，通过v-for循环出来的可以获取多个
this.arr = [1,2,3,4];
console.log(this.$refs.myul); //dom渲染（视图刷新）是异步的，此时这里还是123的dom,用debugger看，console 不太准
// debugger;
console.log(this.$refs.myul.children);
console.log(this.$refs.myul.children.length);
//dom映射- 数据改变了，视图会刷新
// 改变数据后，想马上取到最新结果去操作，一定放在 this.$nextTick()里
//如果数据变化后想获取真实dom中的内容，需要等待页面渲染完毕后再去获取，所有的dom操作，最好放在 this.$nextTick()里
this.$nextTick(()=>{
console.log(this.$refs.myul);
console.log(this.$refs.myul.children);
console.log(this.$refs.myul.children.length);
})
}
})
</script>
</body>
</html>
this.$refs
this.$refs 所有有ref属性元素的集合-获取dom
以前：
获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值
现在：
ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用this.$refs.input1就行, 这样就可以减少获取dom节点的消耗
<input type="text" ref="input1"/>
console.log(this.$refs.input1.value)
console.log(this.$refs.myul.children.length);
