您现在的位置是:首页 >技术杂谈 >Vue3.0网站首页技术杂谈

Vue3.0

Adam—— 2023-05-24 20:00:02
简介Vue3.0

Vue3.0


动机与目的

更好的逻辑复用 与 代码组织 (composition组合式api)
optionsAPI(旧) => compositionAPI(新), 效果: 代码组织更方便了, 逻辑复用更方便了 非常利于维护!!
更好的类型推导 (typescript支持)
**vue3 源码用 ts 重写了, vue3 对 ts 的支持更友好了 (ts 可以让代码更加稳定, 类型检测! )**


vue3.0优点

性能方面

  • 打包大小减少
  • 初次渲染快 , 更新渲染快
  • 内存减少

源码方面

  • 移除一些冷门 API,比如 filter、inline-template 等,体积减少
  • 引入 tree-shaking 减少打包体积(通过编译阶段的静态分析,找到没有引入的模块并打上标记,并且移除)
  • 使用 Proxy 代替 defineProperty 实现响应式。
  • Vue3 可以更好的支持 TypeScript
  • Composition API(组合 API)可以按需使用,多余勾子配置不用再次打包

Vue3.0响应式原理

vue2.x 通过 Object.defineProperty()实现的响应式原理存在以下问题

  • 新增属性、删除属性, 监听不到变化从而不是响应式数据,页面也不会改变
  • 直接通过下标修改数组也监听不到。 对此 vue3.0 解决了这些问题

proxy 简介(3.x)

vue 响应式原理本质就是 ES6 新语法 proxy 实现的。 Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截 因此提供了一种机制,可以对外界的访问进行过滤和改写. 接收两个参数,var proxy = new Proxy(target, handler); **target** 参数表示所要拦截的 目标对象,**handler** 参数也是一个对象,用来定制拦截行为。

// 源对象
let obj = {
  name: 'haha',
  age: 18,
}
// handler作为拦截配置对象
const p = new Proxy(obj, {
  // 读取操作
  get(target, propName) {
    // get方法接收2个参数 target指源对象,就是obj,propName就是你当前操作的属性
    // 返回当前读取的值
    return target[propName]
  },
  // 修改操作,新增属性操作时都会触发
  set(target, propName, value) {
    // set方法接收3个参数 target指源对象,前面2个与上相同,第三个参数是修改的值
    // 通知原对象修改数据
    target[propName] = value
  },
  //删除操作
  deleteProperty(target, propName) {
    return delete target[propName]
  },
})
// 以上 即可实现对象的增删改查的监听,实现数据的相应式

Reflect 简介

Reflect 对象与 Proxy 对象一样,也是 ES6 为了操作对象而提供的新 API。具有反射的意思。 将 Object 对象的一些明显属于语言内部的方法(比如 Object.defineProperty),放到 Reflect 对象上。现阶段,某些方法同时在 ObjectReflect 对象上部署,未来的新方法将只部署在 Reflect 对象上。也就是说,从 Reflect 对象上可以拿到语言内部的方法。
修改某些 Object 方法的返回结果,让其变得更合理,会有一个布尔返回值,易于捕捉错误(js 单线程,报错会阻塞进程)

/ 老写法
try {
  Object.defineProperty(target, property, attributes)
  // success
} catch (e) {
  // failure
}

// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}
let obj = {
  name: 'haha',
  age: 18,
}
// 三个静态方法:
Reflect.get(obj, 'name') // 返回 haha 读取对象的某个属性的值
Reflect.set(obj, 'name', '小明') //  返回布尔 修改某个属性的值
Reflect.deleteProperty(obj, 'name') //  返回布尔 删除某个属性

const p = new Proxy(obj, {
  //有人读取p的某个属性时调用
  get(target, propName) {
    return Reflect.get(target, propName)
  },
  //有人修改p的某个属性、或给p追加某个属性时调用
  set(target, propName, value) {
    Reflect.set(target, propName, value)
  },
  //有人删除p的某个属性时调用
  deleteProperty(target, propName) {
    return Reflect.deleteProperty(target, propName)
  },
})

生命周期介绍

Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有2个钩子发生了改变 - beforeDestroy改名为beforeUnmount(卸载前) - destroyed改名为unmounted(卸载) 与vue2不同的是,vue3中是有了el模板之后才会去初始化,而vue2中是先created之后再去找模板
分为2种形式的生命周期勾子


组合式 api(Composition API)

setup

它是 vue3 中一个新的配置项,值为一个函数。所有的组合 api 都要在它里面使用

使用介绍

  1. 使用变量 或者事件 需要把名字 return 出去即可在模板中使用。
export default {
  setup() {
    let name = 'zhang'
    function at() {
      console.log(1)
    }
    return {
      name,
      at,
    }
  },
}
  1. setup 函数的两种返回值,一种就是上面常规返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用,还有一种就是返回一个函数
// 若返回一个渲染函数:则可以自定义渲染内容
import { h } from 'vue'
export default {
  setup() {
    return () => h('h1', '你好')
  },
}

注意事项:

  1. 注意 vue3 虽然可以向下兼容 vue2,但是尽量不能混合使用
  2. Vue2.x 配置(data、methos、computed...)中可以访问到 setup 中的属性、方法
  3. 由于 setup 中没有 this,所以 setup 中没办法读取 Vue2.x 配置中的数据和方法
  4. 如果有重名, setup 优先
  5. setup 执行的时机是最早的,在 beforeCreate 之前执行,所以此时 this 是 undefined
  6. 参数问题 setup 接收 2 个参数
props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。

context:上下文对象
- attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于 ```this.$attrs```- slots: 收到的插槽内容, 相当于 ```this.$slots```- emit: 分发自定义事件的函数, 相当于 ```this.$emit```
// 在子组件中
export default {
  props: ['msg', 'school'],
  emits: ['hello'],
  setup(props, context) {
    // props接收props配置项中的相应式数据{msg:'',school:''}
    // context相当于上下文对象,里面有三个值attrs,slots,emit
    //方法
    function test() {
      // 调用父组件方法
      context.emit('hello', 666)
    }
    return {
      test,
    }
  },
}

ref 函数

作用: 定义一个响应式的数据(主要针对基础类型数据) 方法:引入 ref 函数,const xxx = ref(initValue) 模板中读取数据: 不需要.value,直接:`<div>{{xxx}}</div>

处理基本数据类型

RefImpl 对象中.value 是基础类型时,用的是 Object.defineProperty 通过 getset 实现的响应式数据

import { ref } from 'vue'
export default {
  setup() {
    let name = ref('张三')
    function change() {
      console.log(name, 'name')
      //ref加工之后生成一个 RefImpl引用对象,该对象的原型对象上可以发现,底层其实还是Object.defineProperty通过
      // get 和set实现的响应式数据
      // 因此改变基本数据需要用到RefImpl引用对象中的value属性
      name.value = '小明'
    }
    return {
      name,
      change,
    }
  },
}

处理对象类型

RefImpl 对象中.value 是对象类型,用的是 proxy 代理对象实现的响应式数据

import { ref } from 'vue'
export default {
  setup() {
    let obj = ref({
      name: '小明',
      age: 20,
    })
    function change() {
      obj.value.name = '小工'
      obj.value.age++
      console.log(obj.value)
      //可以发现是一个Proxy 对象,其本质其实调用的是```reactive```函数实现Proxy代理响应式对象
    }
    return {
      obj,
      change,
    }
  },
}

reactive 函数

作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数) 方法:const x= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy 的实例对象,简称 proxy 对象) 特点:可以实现数组、深层对象的响应式数据,这是 vue2.0 中无法实现的,底层基于 Proxy

export default {
  setup() {
    let obj = reactive({
      name: '小明',
      age: 20,
    })
    function change() {
      console.log(obj, 'obj')
      //可以发现obj此时就是一个Proxy的实例对象可以直接修改对象内部属性
      obj.name = '小三'
      obj.age++
    }
    return {
      obj,
      change,
    }
  },
}

总结 ref 和 reactive

从定义数据角度对比

  • ref 用来定义:基本类型数据。ref 也可以用来定义对象(或数组)类型数据, 它内部会自动通过reactive转为代理对象
  • reactive 用来定义:对象(或数组)类型数据。

从原理角度对比

  • ref 通过Object.defineProperty()getset来实现响应式(数据劫持)。
  • reactive 通过使用 Proxy 来实现响应式(数据劫持), 并通过 Reflect 操作源对象内部的数据。
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。