vue3 详细讲解

文章目录

vue3 详细讲解

生命周期

vue3中可以继续用vue2中的生命周期钩子，但是有两个改名了：

beforeDestory 改名为 beforeUnmount
destroyed 改名为 unmounted

vue3提供了Composition Api 形式的生命周期钩子，也vue2中钩子对应关系如下：

beforeCreate ===> setup
created ===> setup
beforeMount ===> onBeforeMount
mounted ===> onMounted
beforeUpdate ===> onBeforeUpdate
updated ===> onUpdated
beforeUnmount ===> onBeforeUnmount
unmounted ===> onUnmounted

setup

vue3中的新配置项，值为一个函数，组件中所用到的数据，方法等等，均要配置在setup中，

setup函数的两个返回值：
1、若返回一个对象，则对象中的属性，方法，在模板中均可以直接使用。
2、若返回一个渲染函数，则可以自定义渲染内容

注意*：
1、尽量不要与vue2配置混用。
vue3是向下兼容的，vue2中的data(),methids:{}…可以访问到setup中的属性，方法。但在setup中不能访问到vue2配置的data(),methids:{}… 。如果有重名setup优先。
2、setup不能是一个async函数，因为用async返回值不再是return的对象，而是promise,模板看不到return对象。

setup执行时机在beforeCreate 之前执行一次，this是undefined。

setup 两个参数：
参数1：props 值为对象，包含组件外部传递过来，且组件内部声明接收的属性
参数2：context 上下文对象，

attes 值为对象，包含组件外部传递过来但是没有在props配置中声明的属性，相当于vue2中的this.$attrs。
slots 收到的插槽内容，相当于this.$slots。
emit 分类自定义事件的函数，相当于this.$emit。

在vue2中通过props中声明接收，如果不接收在 $attrs中，
如果是插槽不接收在 $slots中

ref 函数

返回一个响应式可更改的ref对象，
在js或ts中使用需要.value。如果是对象只需要第一层.value
template模板中会自动浅层解包，不用 .value，

扫描二维码关注公众号，回复： 15252688 查看本文章

<template>
<div> 姓名：{
    
    {
    
    name}} </div>
</template>
// js
import {
    
    ref} from 'vue'
setup(){
    
    
let name = ref('zhangsan')
let obj = ref({
    
    
	age:22,
	type:'asdajf'
})
// 修改name的值
name.value = 'lisi';
obj.value.age = 18
//对象，map或者数组原生集合类型ref元素时，不执行ref解包，需要.value。
}

ref（）的参数可以是基本类型，也可以是参数。

ref中如果是对象，在内部求助了reactive函数，会转为Proxy对象，
ref定义基本数据类型还是用Object.defineProperty()的get,set来完成的。

reactive函数

用于定义对象类型的响应式数据，（基本类型数据用ref）。

const pro = reactive({
    
     //返回一个代理对象（proxy对象）
	name:"shangsan",
	age:18
})
pro.name = "lisi"  // 使用不需要像ref一样.value。

reactive定义的响应式对象是深层次的。内部基于ES6的proxy实现，通过代理对象操作源对象内部数据进行操作。解决了vue2中对数组操作监听不到的情况。

vue2 在响应式存在的问题

1、对象中添加一个新的属性时页面监测不到变化，需要用： this.$set(对象,属性名,值) 或者 Vue.set(对象,属性名,值)

2、删除对象 delete per.name 页面也是监测不到的，需要用：this.$dalete(对象,‘属性名’) 或者 Vue.dalete(对象,‘属性名’)

3、修改数组通过下标直接赋值修改是无效的，需要用：this.$set(对象,数组下标,值) 或者 Vue.set(对象,数组下标,值) 或者数组.splice(下标,1,值)

Reflect (反射)

reflect 更友好，重复定义一个的对象属性操作不会报错，Object.defineProperty 要用try.catch

let obj = {
    
    a:1,b:4}
Reflect.set(obj,'a',323); // 修改属性
Reflect.deleteProperty(obj,'a') // 删除属性

vue3 的响应式原理

let person = {
    
    
	name:"zhangsna",
	age:10,
}
// 改了p的属性person也会变化
const p = new Proxy(person,{
    
    
	get(target,propName){
    
     // 源对象，读取的属性
		console.log(`读取了p对象上的属性${
      
      propName}`)
		return Reflect.get(target,propName )  //return  target[propName]
	},
	set(target,propName,value){
    
     // // 源对象，修改的属性，修改的属性值
		console.log(`修改了p对象或给p对象添加上的属性${
      
      propName}`)
		//target[propName] = value
		Reflect.set(target,propName,value)
	},
	deleteProperty(target,propName){
    
    
		console.log(`删除了p对象上的属性${
      
      propName}`) 
		//return delete target[propName] // 返回Boolean值
		return Reflect.deleteProperty(target,propName)
	}
})

reactive 对比 ref

从定义数据的角度
- ref用来定义基本类型数据
- reactive用来定义对象（或数组）类型数据。
- 备注：ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象。
从原理角度对比
- ref 通过Object.defineProperty()的get与set来实现响应式（数据劫持）
- reactive通过使用proxy来实现响应式（数据劫持），并通过reflect操作源对象内部的数据。
从使用角度对比：
- ref 定义的数据在操作数据时需要.value，读取数据在模板中直接读取不需要.value。
- reactive定义的数据，操作数据和读取数据都不需要.value。

computed

与vue2中computed配置一致

import {
    
    reactive,computed} from 'vue'
export default {
    
    
	name:"Demo",
	setup(){
    
    
	// 讲输入的姓和名组合起来
		let per = reactive({
    
    
			fristname:"张",
			lastname:"三"
		})
		// 只读的计算属性
		per.fullname = computed(()=>{
    
    
			return per.fristname + per.lastname
		})
		// 写的
		per.fullname = computed(()=>{
    
    
			get(){
    
    
				return per.fristname +"-"+ per.lastname
			},
			set(value){
    
    
				const nameArr = value.split("-")
				per.fristname = nameArr[0]
				per.lastname= nameArr[1]
			} 
		})
	}
	return {
    
    
			per 
	}
}

Watch

wacth 在vue2中是配置项，在vue3中是一个函数，函数的第一个参数是监视哪个数据，第二个参数是回调函数，第三个参数是监视的配置。
注意：
1、监听对象类型的数据时无法获取到oldValue的值（旧的，之前的值）
2、在vue2中对象深层嵌套要开启深度监视，vue3对reactive定义的对象默认开启了深度监视，无法关闭
3、监听reactive定义的对象数据中的某个属性类型依然为对象时，配置深度监视deep 是有效的*

import {
    
    ref,reactive,watch} from 'vue'
export default {
    
    
	setup(){
    
    
	let sum = ref(0);
	//例一： 监视一个数据 ，
	 watch(sum,(newVal,oldVal)=>{
    
    
		console.log("sum改变了",newVal,oldVal)
	},{
    
    immediate})
	// immediate 初始化时就执行

	let name = ref("")
	let mag= ref("")
	//例二： 监视多个数据
	 watch([name ,msg],(newVals,oldVals)=>{
    
     
	 // newVals,oldVals 是一个数组，里面是[name的值，msg的值]
		console.log("sum改变了",newVals,oldVals)
	})

	//例三： 监视reactive的数据
	let per = reactive({
    
    
		name:"",
		age:12,
		job:{
    
    
			jianzhi:{
    
    
				gongzi:10
			}
		}
	})
	 
	watch(per,(newVal,oldVal)=>{
    
    
		console.log("per改变了",newVal,oldVal)
	},[deep:false]) // 这里的deep配置是无效的
	// 这里有一个问题，无法获取到正确的oldVal

	//例四： 如果要监视对象中的某个属性
	watch(()=>per.name ,(newVal,oldVal)=>{
    
    
		console.log("per中的name改变了",newVal,oldVal)
	}) // 此时oldval可以获取正确的数据 
	// 例五：监视对象中的多个属性
	watch([()=>per.name,()=>per.age] ,(newVal,oldVal)=>{
    
    
		console.log("per中的name或age改变了",newVal,oldVal)
	}) // 此时oldval可以获取正确的数据 
    
    // 例六：监视对象中的对象
	watch(()=>per.job,(newVal,oldVal)=>{
    
    
		console.log("per中的name改变了",newVal,oldVal)
	},[deep:false]) // 这里因为监视的是reactive中的属性依然为对象，需要开发deep深度监视
	// 这里的深度监视是有效的 ，此处获取不到oldVal的值
	return {
    
    
		sum,
		per 
	}
	}
}

问题：怎么用wacth监听ref定义的对象类型中属性的改变？
方法1：如果监听ref 定义的对象是需要.value。因为监测ref包裹的对象是监测对象的地址，属性变了地址没有变化是监测不到的。如果.value了，实质监测是是reactive封装的Proxy 代理的数据，能监听到变化。
方法2：开发深度监视deep也可以监测到

WatchEffect 函数

watch 要指明监视的属性，也要指明监测的回调。
WatchEffect 不用指明监视哪个属性，监视回调中用到哪个属性，那就监视哪个属性。

WatchEffect 对比 computed：

computed注重的是计算出来的结果，回调函数必须返回结果，
WatchEffect 注重的是过程，不用写返回值。

import {
    
    ref,reactive,watch,WatchEffect } from 'vue'
export default {
    
    
	setup(){
    
    
	let sum = ref(0);
	let per = reactive({
    
    
		name:"",
		age:12,
		job:{
    
    
			jianzhi:{
    
    
				gongzi:10
			}
		}
	})
	WatchEffect(()=>{
    
    
	   let n = num.value;
	   let name = per.name;
	   conole.log(n,name)
	})
}

下一篇章：
链接: vue3 新特性详解（2）

vue3 新特性详解（1）