【vue3总结知识点——精简一】

认识vue3🌞

Vue是一套用于构建用户界面的渐进式框架。
Vue3也支持Vue2的大多数特性
更好的支持了TypeScript
性能得到了更大的提升：使用proxy代替了defineProperty实现数据响应式
增加了很多的新特性：Composition API（组合式API）,新组件(Fragment/Teleport/Suspense)等等.

作者也是海贼王的海粉，有兴趣的可以讨论讨论

Composition API📖

setup🐎

新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次（beforeCreate之前执行）
函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

注意:
this是undefined, 不能通过this来访问data/computed/methods / props
methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods\

• setup的参数

  • setup(props, context) / setup(props, {attrs, slots, emit})

  • props: 包含props配置声明且传入了的所有属性的对象

  • context：data内容

  • attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs

  • slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots

  • emit: 用来分发自定义事件的函数, 相当于 this.$emit

编写方式

<template>
  <div class="hello">
    <h1>{
  { name }}</h1>
  </div>
</template>
<script>
export default {
     
  name: "hello",
  setup(msg) {
     
    console.log(msg);
    return {
      name:"cloud" };
  },
};
</script>
<style scoped>
</style>

执行时机

setup 会在 beforeCreate 之前执行。

setup 包含的生命周期

需要导入相应的生命周期这些生命周期都在依赖中注意写花括号 { } es6语法

• onBeforeMount——挂载开始前调用
• onMounted——挂载后调用
• onBeforeUpdate——当响应数据改变，且重新渲染前调用
• onUpdated——重新渲染后调用
• onBeforeUnmount——Vue实例销毁前调用
• onUnmounted——实例销毁后调用
• onActivated——当keep-alive组件被激活时调用
• onDeactivated——当keep-alive组件取消激活时调用
• onErrorCaptured——从子组件中捕获错误时调用

import {
    onMounted } from 'vue'
export default {
   
  name: "hello",
  setup(msg) {
   
    onMounted(()=>{
   
      console.log("onMounted");
    })
    console.log(msg);
    return {
    name:"cloud" };
  },
  beforeCreate(){
   
    console.log("beforeCreate");
  }
};

ref获取页面数据👈

（1）作用: 定义一个数据的响应式
（2）语法: const xxx = ref(initValue):
（3）创建一个包含响应式数据的引用(reference)对象；
js中操作数据: xxx.value；
模板中操作数据: 不需要.value；
（4）一般用来定义一个基本类型的响应式数据

别忘了引入ref

import {
    ref,onMounted } from 'vue'

	//创建定时器增加count值
    let count = ref(1);
    setInterval(()=>{
   
      count.value++
    },1000)
    return {
    name:"cloud",count:count };

reactive

1、作用： 定义多个数据的响应式
2、语法：const proxy = reactive(obj):
接收一个普通对象然后返回该普通对象的响应式代理器对象
响应式转换是“深层的”：会影响对象内部所有嵌套的属性
基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

<template>
  <h2>name: {
  {state.name}}</h2>
  <h2>age: {
  {state.age}}</h2>
  <h2>wife: {
  {state.wife}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>

<script>
import {
     
  reactive,
} from 'vue'</