vue3新特性

一.vue3和vue2的区别

1.生命周期函数钩子不同

beforeCreate -> setup()      开始创建组件之前，创建的是data和method
created      -> setup() 
beforeMount  -> onBeforeMount   组件挂载到节点上之前执行的函数
mounted      -> onMounted   组件挂载完成后执行的函数
beforeUpdate ->  onBeforeUpdate  组件更新之前执行的函数
updated      ->  onUpdated  组件更新之后执行的函数
beforeDestroy -> onBeforeUnmount  组件卸载前执行
activated     -> onActivated  组件卸载完后执行
deactivated   -> onDeactivated   在组件切换中老组件消失的时候执行

2.数据双向绑定原理不同

vue2	vue3
利用ES5的一个Object.defineProperty()对数据进行劫持，结合发布者订阅者模式的方式来实现的。	利用ES6的proxy对数据处理

vue3提供的proxy API代理的优势在于：

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

3.定义变量和方法不同

vue2	vue3
在data中定义变量，在method中创建方法	使用一个新的setup方法

vue3提供的setup方法在组件初始化构造的时候触发。

4.API类型不同

vue2	vue3
选项式api（在代码中分割不同属性：data,computed,methods等）	组合式api（使用方法进行分割，显得更加简便整洁）

5.是否支持碎片

vue2	vue3
否	是，即可以拥有多个根节点

<template>
  <div></div>
  <div></div>
</template>

6.父子之间传参不同

vue2	vue3
父传子：子组件通过pro接收；子传父：子组件中通过$emit向父组件触发一个监听方法，传递一个参数	使用setup()中的第二个参数context对象中有emit，只需要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

7.v-if和v-for的优先级

vue2	vue3
v-for优先于v-if生效	v-if优先于v-for生效

二.vue核心语法

1.setup函数

setup是vue3种一个新的配置项，值是一个函数组件中所用到的：数据、方法、计算属性、监听···等等，均配置在setup中。
特点如下：

setup函数返回的对象中的内容，可直接在模板中使用。
setup中访问this是undefined。
setup函数会在beforeCreate之前调用，它是领先所有钩子执行的。

2.ref和reactive

ref用来定义：基本类型数据，对象类型数据；
reactive用来定义：对象类型数据;
ref创建的变量必须使用.value;
reactive重新分配一个新对象，会失去响应式；

3.父子组件

3.1父传参数给子
第一步：创建一个父组件页面，引入子组件，并传入参数

<template>
  <h1>父传子</h1>
  <h2>使用子组件传参</h2>
  <chile-vue :title="title" :person="person"></chile-vue>
</template>
<script setup>
import chileVue from "@/views/child.vue";
import {reactive, ref} from "vue";
const person = reactive({
  username: "zhangsan",
  age: 18
})
const title = ref("我是标题");
</script>

第二步：创建一个子组件页面：child.vue，通过defineProps接收父传入的参数

<template>
  <h2>title: {{title}}</h2>
  <h2>person: {{person}}</h2>
</template>
<script setup>
  const prop = defineProps({
    title: String,
    person: Object
  });
  // 在js中可以读取父传入过来的参数，但是不能修改 
  console.log("title", prop.title)
</script>

3.2.子传参给父
子组件给父组件传值，需要通过defineEmit在子组件声明事件方法，然后调用该事件方法传值，父组件需要监听该事件方法取值。
第一步：在子组件中准备一个按钮，点击按钮给父组件传值。

<h1>给父组件传参</h1>
<button @click="sendData2Parent">给父组件传参</button>

---------------------------------------------------------------------------------

//声明事件
const $emits = defineEmits(["data2parent","事件名","事件名"]);

const  sendData2Parent = ()=>{
    //调用声明的事件
    $emits('data2parent',"传给父组件的数据");
}

第二步：在父组件中绑定该事件，并调用一个函数来接受值。

<child-vue @data2parent="getDataFromChild"  ...></child-vue>
const getDataFromChild = (data)=>{
    console.log("打印数据",data);
}

3.3子暴露
vue3提供defineExpose来暴露子组件中的数据和方法在父组件中可以拿到子组件暴露的数据或者方法。
第一步：暴露数据

// 子暴露
defineExpose({
  data: "我是子暴露的数据",
  sayHi: () => {
    return "我是子暴露的方法被调用返回的结果";
  }
})

第二步：在父组件接受子暴露的数据

<child-vue  ref="childVueRef"></child-vue>
<script setup>
  const childVueRef = ref(null);
  onMounted(()=>{
    console.log("子暴露的数据：", childVueRef.value.data);
    console.log("子暴露的方法：", childVueRef.value.sayHi());
  })
</script>