lession 1、插值表达式、指令、动态属性、v-html

{{name}}

<p :id="did"></p>

<div v-html="html">
	<p>我是哈默</p>
</div>

v-html 会造成xss攻击

lession 2、计算属性

会做数据缓存

double2:{
	get(){
		return this.number*2  //原值改变，计算属性改变
	},
	set(value){
		this.number=value/2  //计算属性改变，原值还原
	}
}

lession 3、watch监听器-用来监听数值的变化

data(){
	return{
		name:'哈默',
		info:{
			hobby:'篮球'
		}
	}
}

watch:{
	//字符串监听
	name(newVal,oldVal){
		console.log('name',newVal,oldVal);
	},
	//对象数据的监听
	info:{
		handler:function(newVal,oldVal){
			console.log('info',newVal,oldVal)
		},
		deep:true //深度监听开关
	}
}


lession 4、动态绑定 Class 和 Style 

对象方式动态绑定样式
<li class="item" :class="{'active':isActive}">项目1</li>
数组方式绑定样式
<li class="item" :class="['active']">项目1</li>
行内样式动态绑定
<li class="item" :style="styleData">项目1</li>
data(){
  return {
    isActive:true,
    styleData:{
      background:'#efefef',
      color:'#ffffff'
    }
  }
}

lession 5、v-if 和v-show 的区别

<p v-if="data==='a'"> a(v-if) </p>
<p v-show="data==='b'"> b(v-show) </p>

v-if 是直接决定页面元素是否存在
v-show是在样式级别控制元素是显示还是因此

lession 6、v-for 列表循环
数组遍历：
<li v-for="(item,index) in array" :key="item.id"></li>
对象遍历：
<li v-for="(value,key,index) in object" :key="key"></li>
object:{
  name:'桃谷六仙'，
  hobby:'篮球'
}
v-if 和 v-for 联合使用
v-for 优先级比较高，可以在v-for 的父元素写v-if判断

lession 7、事件

@click="logout(3,$event)"

logout(id,e){
	alert(id)
	console.log('e',e)
}

lession 8、父子组件通信方法prop $emit

通信方式总结:
父组件数据传递给子组件步骤：
1.父组件定义传递给儿子的数据
2.子组件用prop定义传递过来的数据的类型和变量的名称
3.父组件调用子组件，并进行属性值和变量名绑定
4.子组件调用父组件传递过来的数据
子组件给父组件传递数据的步骤：
1.子组件定义传递给父组件的数据对象和事件
2.父组件调用子组件，并且在调用标签绑定子组件传递过来的事件名称
3.在父组件的事件处理函数中接受子组件传递的数据对象

lession 9、兄弟组件通信方式

定义一个vue 实例
然后在兄弟组件中组件挂载的时候使用 
eventBus.$on('addItem',this.handleAddTitle);
handleAddTitle(title){
	console.log('title',title)
}

this.$emit('add',this.title)
eventBus.$emit('addItem',this.title)

lession 10、父子组件传值的5种方式
一、props+$emit()
二、回调函数方式(callback)
三、$parent+$children   this.$children[0].data   this.$parent.data
四、provide+inject		父组件 provide  子组件 inject
五、$attrs+$listeners  父、子、孙 三代组件  在子组件中用 v-bind="$attrs" 给孙组件 代传递父组件中的数据，在孙组件中之间用  {{$attrs.属性名}} 的方式使用 父组件中的数据
六、使用 ref 属性的方式 父组件 ref="childComp"  this.$refs.childComp.属性名

lession 11、父子组件生命周期执行顺序问题

new vue() 生命周期

beforeCreate()
created()
beforeMount()
mounted()
beforeUpdate()
updated()
beforeDestory()
destroyed()

简化

created()
mounted()
updated()
destroyed()

存在父子组件的生命周期

parent:App created
child:List created
child:List mounted
parent:App mounted

结论：页面创建的时候 先父后子 挂载组件的顺序先子后父
parent:App before update
child:List before update
child:List updated 
parent:App updated 

结论：组件更新顺序 先父后子  更新完成的顺序 先子后父

lession 12、

1.nextTick 会在异步渲染完成后执行
2.异步渲染是批量进行渲染的
this.$nextTick(()=>{
	const ulElem=this.$refs.ulRef;
	const length=ulElem.childNodes.length;
	console.log('length',length)
})

lession 13、slot 插槽

lession 14、vue3 和 vue2 的区别

Diff算法是如何实现的

配置项api options api
配置项型代码风格

很分散，逻辑不内聚，解决了耦合，没有解决
组合式api composition API 
解决了高内聚问题

import {ref} from 'vue'

const useCmpute=(count)=>{
	const plus=()=>{
		count++;
	}
	const minus=()=>{

		count--	
	}
	return {
		plus,minus
	}
}

setup(){
	const cout=ref(0);
	{plus,minus}=useCompute(count);
	return {
		count,plus,minus
	}
}


总结：
1. vue2和vue3双向数据绑定原理发生了改变
vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的
vue3 中使用了 es6 的 ProxyAPI 对数据代理。

相比于vue2.x，使用proxy的优势如下

defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

2. 默认进行懒观察（lazy observation）。
在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。

3. 更精准的变更通知。
比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。

4. 3.0 新加入了 TypeScript 以及 PWA 的支持
5.vue2和vue3组件发送改变


reactivity API

Vue2使用选项类型API（Options API）

Vue3合成型API（Composition API）