【无标题】

最新推荐文章于 2024-10-09 10:13:02 发布

此非木

最新推荐文章于 2024-10-09 10:13:02 发布

阅读量147

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44061998/article/details/131844049

版权

一、Vue3简介

1、Vue3带来了什么？

（1）性能的提升；

（2）源码的升级；

使用Proxy代替defineProperty实现响应式；

重写虚拟DOM的实现和Tree-Shaking

（3）拥抱TypeScript

（4）新的特性

1.Composition API（组合API）

2.新的内置组件

3.其他改变

二、常用Composition API

1、初识setup

1、setup是Vue3中一个新的配置项，值为一个函数；

2、组件中所要用到的数据、方法等，均要配置在setup中；

3、setup的两种返回值：

（1）：若返回一个对象，则对象中的属性、方法，均可以在模板中直接使用；

（2）：若返回一个渲染函数：则可以自定义渲染内容；

setup的两个注意点：

1、setup执行时机，在beforeCreate之前执行一次，this是undefined；

2、setup的参数：

（1）：props：指为对象，包含组件外部传递过来，且组件内部声明接收了的属性。

（2）：context：上下文对象

attrs：值为对象，包含组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs；

slots：收到的插槽内容，相当于this.$slots;

emit:分发自定义事件的函数，相当于this.$emit。

2、ref函数

1、作用：定义一个响应式数据

2、语法：const xxx=ref(initValue)

创建一个包含响应式数据的引用对象（reference对象，简称ref对象）；

js中操作数据：xxx.value;

模块中读取数据不需要value，直接{{xxx}}；

3、reactive函数

作用：定义一个对象类型的响应式数据（基本类型用ref）；

语法：const 代理对象=reactive(被代理对象）接收一个对象（或数组），返回一个代理对象（proxy对象）；

4、reactive和ref对比

1、从定义数据角度对比：

ref用来定义：基本数据类型；

reactive用来定义：对象（或数组）类型数据；

备注：ref也可以用来定义对象或数组类型数据，它内部会自动通过reactive转为代理对象；

2、从原理角度对比：

ref通过Object.defineProperty()的get和set来实现响应式；

reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据。

3、从使用角度对比：

ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value；

reactive定义的数据：操作数据与读取数据均不需要.value；

5、Vue3中的响应式原理

实现原理：

通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等；

6、Vue3中的计算属性和监视

计算属性（Computed Properties）

计算属性是依赖其他数据的属性，它的值根据其他属性的变化而变化。
计算属性使用 computed 配置选项定义，它可以是一个函数。
计算属性会缓存计算结果，只有依赖的数据发生变化时，才会重新计算。
计算属性可以像普通属性一样在模板中使用，不需要调用函数。
可以通过get 和 set 方法来定制计算属性的读取和设置行为。

const app = Vue.createApp({
  data() {
    return {
      radius: 5,
    };
  },
  computed: {
    circumference() {
      return 2 * Math.PI * this.radius;
    },
    area: {
      get() {
        return Math.PI * Math.pow(this.radius, 2);
      },
      set(newValue) {
        if (newValue >= 0) {
          this.radius = Math.sqrt(newValue / Math.PI);
        }
      },
    },
  },
});

监听属性（Watch）：

监听属性用于观察一个或多个值的变化，并在变化发生时执行相应的函数。
监听属性使用 watch 配置选项定义，可以是一个对象，键是要观察的属性名，值是相应的处理函数。
处理函数接收两个参数：新值和旧值。可以通过这些参数来执行相应的逻辑。
监听属性可以用于监听多个属性的变化，也可以处理异步操作。

const app = Vue.createApp({
  data() {
    return {
      message: "",
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log("New value: " + newValue);
      console.log("Old value: " + oldValue);
      // 执行相应的逻辑
    },
  },
});

计算属性和监听的使用情景：

计算属性适用于多个属性之间有依赖关系，需要根据其他属性的变化来计算出新的值的场景。
监听属性适用于需要在某个属性值发生变化时执行特定逻辑的场景，比如发送网络请求、操作 DOM 等。
. 在一些情况下，计算属性和监听属性可以互相替代，但通常计算属性更适合处理简单的计算逻辑，而监听属性更适合处理复杂的逻辑。

7、Vue3中的生命周期

vue3中可以继续使用vue2中的生命周期钩子，但有两个被更名：
beforeDestroy改名为beforeUnmount；
destroyed改名为unmounted；
vue3中也提供了CompositionAPI形式的生命周期钩子，与vue2中钩子对应关系如下：
beforeCreate=>setup（）
created=>setup()
意思是setup相当于beforeCreate和created，所以不用往setup中放；
beforeMount=>onBeforeMount
mounted=>onMounted
beforeUpdate=>onBeforeUpdate
updated=>onUpdated
beforeUnmount=>onBeforeUnmount
unmounted=>onUnmounted