vue3.0整理

Composition(组合)API

setup函数

• ref 和 reactive
• computed 和 watch
• 新的生命周期函数
• provide 与 inject
• …

新组件

• Fragment - 文档碎片
• Teleport - 瞬移组件的位置
• Suspense - 异步加载组件的loading界面

响应式

比较 vue2 和 vue3 的响应式

vue2 响应式

• 核心
  • 对象：通过defineProperty对对象的已有属性值的读取和修改进行劫持（监视 / 拦截）
  • 数组：通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

  Object.defineProperty(data,count,{
  	get(){},
  	set(){}
  })
  

• 问题
  • 对象直接新添加的属性或删除已有属性，界面不会更新4
  • 直接通过下标替换元素更新length，界面不会自动更新 arr[1] = {}

vue3 响应式

• 核心
  • 通过Proxy（代理）：拦截对data任意属性的任意（13种）操作，包括属性值的读写，属性的添加，属性的删除等…
  • 通过Reflect（反射）：动态对代理对象的相应属性进行特定的操作

  new Proxy(data,{
  	get(target,prop){
  		return Reflect.get(target,prop)
  	},
  	// 拦截设置属性值或添加新属性
  	set(target,prop,value){
  		return Reflect.set(target,prop,value)
  	}
  	// 拦截删除属性
  	deleteProperty(target,prop){
  		return Reflect.deleteProperty(target,prop)
  	}
  })
  
  proxy.name = 'tom'
  
  

  • proxy用法实例

  // 目标对象
  const user = {
  	name: '佐助',
  	age: 20,
  	wife: {
  		name: '小樱',
  		age: 19
  	}
  }
  //把目标对象变成代理对象  
  // 参数1是目标对象，参数2是处理器对象，处理器对象里有一些监视的方法，通过监视方法和反应对象（Reflect）里的一些方法从而实现数据的的响应式
  //参数1：user ---> target 目标对象
  //参数2：handler ---> 处理器对象，用来监视数据，及数据操作
  const proxyuser = new Proxy(user,{
  	//用于拦截对象的读取属性操作
  	//参数1: target ---> 目标
  	//参数2：property
  	//参数3：receiver ---> 关于继承的操作，一般只用前两个huo
  	// 获取目标对象某个属性值
  	get(target,prop){
  		console.log('get方法调用了')
  		// 将值反射出去
  		return Reflect.get(target,prop)
  	},
  	
  	// 修改目标对象的属性值 / 为目标对象添加新的属性值
  	set(target,prop,val){
  		console.log('set方法调用了')
  		return Reflect.set(target,prop,val)
  	},
  	
  	// 删除目标对象某个属性值
  	deleteProperty(target,prop){
  		console.log('delete')
  	}
  })
  	
  // 通过代理对象获取目标对象中的某个属性值
  console.log(proxyUsser.name)
  // 通过代理对象更新目标对象上的某个属性值
  propyUser.name = '鸣人'
  console.log(user)
  // 通过代理对象向目标对象中添加一个新的属性
  proxyUser.gender = '男'
  console.log(user)
  delete proxyUser.name
  

生命周期

ref

• ref 的另一个作用：可以获取页面元素

  <template>
  	<input type="text" ref="inputRef"/>
  </template>
  
  <script lang="ts">
  	import { defineComponent, onMounted, ref} from 'vue'
  	
  	export default defineComponent({
  		name: 'App',
  		// 需求：当页面加载完毕，页面中的文本框可以直接获取焦点
  		setup(){
  			const inputRef = ref<HTMLElement | null>(null)
  			// 页面加载后的生命周期组合API
  			onMounted(()=>{
  				inputRef.value && inputRef.value.focus()  // 自动获取焦点
  			})
  			return {
  				inputRef,
  			}
  		}
  	})
  </script>
  

provide 与 inject

provide 与 inject 提供依赖注入，实现跨层级（祖孙）间通信

// 一组件 提供数据
provide('标识',数据)

// 另一组件 注入的操作
接收数据的变量名 = inject('标识')

shallowReactive 与 readonly

shallowReactive（浅的劫持，浅的监视，浅的响应数据）与 reactive（深的）
readonly：只读