vue3

reactive响应式
1.对象类型

import { reactive, toRefs } from "vue";
const user = reactive({
 name: 'Vue2',
 age: 18,
});
user.name = 'Vue3'；
let {name}=toRefs(user);//解构时需要用toRefs，否则会消除响应式

2基本类型

const num = ref(0);//定义初始值
num.value++;

defineProps

const props = defineProps<{
  size: string;
  name: string;
}>();//父传子属性值
console.log(props.id)//不加props.拿不到值
<span>{{id}}</span><--!组件使用时不用加props.-->

defineEmits

// 定义Emits(子组件)
    const emits = defineEmits<{
        (e: 'add', id: number): void
    }>()

    const btnAdd = () => {
        emits('add',2)
    }//子组件调用父组件方法add()
//父组件
<child @add="add"><child/>
<script setup lang="ts">
  const add = (num:number)=>{
    result.value+=num
}
</script>

父子组件通讯

父传子

父组件：

<Son :money="money"/>

子组件：

<span>{{money}}</span>

props:{
    money:{
        type:string,
        default:0
    }
}
//在setup中使用
setup(props){
    console.log(props.money)
}

子传父

子组件：

<button @click="changeMoney">改变</button>

setup(props,{emit}){
   const changeMoney=()=>{
        emit("change-money",20)
   }
}

父组件

<Son :money="money" @change-money="getSon"/>
//语法糖：v-model="money"

const getSon=(m)=>{
        money.value=m
    }

子组件调用父组件方法

父组件

<Son :count="count" @changeCount="changeCount"/>

const changeCount=(val)=>{
     count.value=val;
}

子组件

const emit=defineEmits(['changeCount']);
const changeCount=()=>{
    emit('changeCount',5)
}

父组件调用子组件方法

子组件

const ChildFn=(v)=>{
    console.log(v)
}
defineExpose({ChildFn})

父组件

<Son ref="sonRef"/>
<button @click="getChild">change</button>

const sonRef=ref(null)
const getChild=()=>{
    sonRef.value.ChildFn("hello")
}

provide 和 inject 注入依赖

provide("count",count)//注入变量
//注入方法
const changeVal=(n)=>{
   count.value=n
}
provide("changeVal",changeVal)

const count = inject('count');//接收变量
//接收方法
const changeVal= inject('changeVal');
const fn=()=>{
  changeVal(20)
}

生命周期

setup()：开始创建组件，在beforeCreate 和 created 之前执行，创建的是 data 和 method
onBeforeMount()：组件挂载到节点上之前执行的函数
onMounted()：组件挂载完成后执行的函数
onBeforeUpdate()：组件更新之前执行的函数
onUpdated()：组件更新完成之后执行的函数
onBeforeUnmount()：组件卸载之前执行的函数
onUnmounted()：组件卸载完成后执行的函数
onActivated()：被 keep-alive缓存的组件激活时调用。
onDeactivated()：被 keep-alive缓存的组件停用时调用
onErrorCaptured()：当捕获一个来自子孙组件的异常时激活钩子函数。

vue2和vue3的区别

响应式原理不同，vue2：Object.definePropty();vue3:proxy()
diff算法不同
生命周期不同
vue2：选项式api(Options API)，组合式api(Composition API)
vue3支持碎片（Fragments）

vue2和vue3diff算法的区别

Vue 2 的 diff 算法会对整个 DOM 树进行完整的比较
但在vue3中，增加了静态标记。在创建vnode的时候，会根据vnode的内容是否可以变化，为其添加静态标记，静态标记会根据不同的标签具有不同的值。这样diff的时候，只需要比较静态标记变化了的节点，要比对的内容更少了

keepAlive原理

keepAlive将满足条件的VNode节点保存在this.cache中，在render时，如果VNode的name符合缓存条件（可以用include以及exclude控制），则会从this.cache中取出之前缓存的VNode实例进行渲染。

最后编辑于：2024.03.13 20:06:04