Vue3新特性

Vue3

Vue3将成为时代的新技术

Vue3和Vue2的区别

1.vue2截取对象使用的是es5的Object.defineProdiffe,Vue3使用的是es6提供的proxy截取对象的各个属性

2.vue3是的代码有了更好的复用性，也使得代码更具有逻辑性

3.虚拟DOM - 新算法

4.模板可以有多个根元素

5.新增组合式 Api

composition api的使用, 需要配置一个setup 函数

setup在生命周期中，它是在组件生命周期beforeCreate执行之前执行

setup中不能使用this，因为this在其中为undefnied

在模版中需要使用的数据和函数，需要在 setup 返回

setup也可以写在script标签上

reactive 函数实现响应式对象

作用: 传入一个复杂数据类型，将复杂类型数据, 转换成响应式数据 （返回该对象的响应式代理)

ref 函数实现响应式变量

作用：reactive他只能创建一个复杂数据类型的响应式，简单数据类型的话需要用ref,当然ref函数也支持传入复杂类型，传入复杂类型，也会做响应式处理

计算属性computed函数

computed函数调用时, 要接收一个处理函数, 处理函数中, 需要返回计算属性的值

let age = ref(10);
let nextAge = computed(()=>{
  return +age.value+1;
})

侦听器watch函数

watch监视, 接收三个参数
1. 参数1: 监视的数据源
2. 参数2: 回调函数
3. 参数3: 额外的配置

// 监听单个ref
const money = ref(100)
watch(money, (value, oldValue) => {
  console.log(value)
})

// 监听多个ref
const money = ref(100)
const count = ref(0)
watch([money, count], (value) => {
  console.log(value)
})

// 监听ref复杂数据
const user = ref({
  name: 'zs',
  age: 18,
})
watch(
  user,
  (value) => {
    console.log('user变化了', value)
  },
  {
    // 深度监听，，，当ref的值是一个复杂数据类型，需要深度监听
    deep: true,
    immediate: true
  }
)

// 监听对象的某个属性的变化
const user = ref({
  name: 'zs',
  age: 18,
})
watch(
  () => user.value.name,
  (value) => {
    console.log(value)
  }
)

vue3生命周期

onMounted:注册一个回调函数，在组件挂载完成后执行

onUpdated:注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用

onUnmounted:注册一个回调函数，在组件实例被卸载之后调用。

onBeforeMount:注册一个钩子，在组件被挂载之前被调用。

onBeforeUpdate:注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

onBeforeUnmount:注册一个钩子，在组件实例被卸载之前调用。

onErrorCaptured:注册一个钩子，在捕获了后代组件传递的错误时调用。

onRenderTracked:注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。

onRenderTriggered:注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。

onActivated:注册一个回调函数，若组件实例是 `` 缓存树的一部分，当组件被插入到 DOM 中时调用。

onDeactivated:注册一个回调函数，若组件实例是 `` 缓存树的一部分，当组件从 DOM 中被移除时调用。

onServerPrefetch:注册一个异步函数，在组件实例在服务器上被渲染之前调用。

组件通讯-父传子

目标：能够实现组件通讯中的父传子组件通讯

步骤：

1. 父组件提供数据
2. 父组件将数据传递给子组件
3. 子组件通过defineProps进行接收
4. 子组件渲染父组件传递的数据

//父组件
let name = ref("葛乐");
let age = ref(20);
<Son :name="name" :age="age"/>
    
    
 //子组件
 import { defineProps } from "vue";
let data=defineProps({
    name:String,
    age:Number
})

组件通讯-子传父

目标：能够实现组件通讯中的子传父

步骤：

1. 子组件通过defineEmit获取emit对象（因为没有this)
2. 子组件通过emit触发事件，并且传递数据
3. 父组件提供方法
4. 父组件通过自定义事件的方式给子组件注册事件

//子组件
let emit = defineEmits(["sendDate"]);
let flag = true;
emit("sendDate",flag)

//父组件
<Son @sendDate="sendDate"/>
    
const sendDate=(data)=>{
  console.log(data);
}

依赖注入 - provide 和 inject

依赖注入, 可以非常方便的实现 跨层级的 组件通信

//父组件
import { onMounted, onUnmounted, provide, reactive, ref } from "vue";
let name = ref("葛乐");
provide("name",name.value)

//子组件
import { defineProps, inject } from "vue";
const name = inject("name");

vue3中废弃了过滤器

补充-toRefs 函数

使用场景: 如果对一个响应数据, 进行解构 或者 展开, 会丢失他的响应式特性!

原因: vue3 底层是对 对象 进行监听劫持

作用: 对一个响应式对象的所有内部属性, 都做响应式处理

reactive/ref的响应式功能是赋值给对象的, 如果给对象解构或者展开, 会让数据丢失响应式的能力

使用 toRefs 可以保证该对象展开的每个属性都是响应式的

指令

v-pre 跳过该元素及其所有子元素的编译

v-memo 期望的绑定值类型：any[]

h()

创建虚拟 DOM 节点 (vnode)。

import { h } from 'vue'

// 除了 type 外，其他参数都是可选的
h('div')
h('div', { id: 'foo' })

// attribute 和 property 都可以用于 prop
// Vue 会自动选择正确的方式来分配它
h('div', { class: 'bar', innerHTML: 'hello' })

// class 与 style 可以像在模板中一样
// 用数组或对象的形式书写
h('div', { class: [foo, { bar }], style: { color: 'red' } })

// 事件监听器应以 onXxx 的形式书写
h('div', { onClick: () => {} })

// children 可以是一个字符串
h('div', { id: 'foo' }, 'hello')

// 没有 prop 时可以省略不写
h('div', 'hello')
h('div', [h('span', 'hello')])

// children 数组可以同时包含 vnode 和字符串
h('div', ['hello', h('span', 'hello')])

mergeProps()

合并多个 props 对象，用于处理含有特定的 props 参数的情况。