大厂技术  坚持周更  精选好文

一、Vue3

Vue3中文文档^[1]

• Vue3是什么，与Vue2区别（What）

1. Performance：性能更强。
2. Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。
3. Composition API：组合式API
4. Fragment, Teleport, Suspense：“碎片”，Teleport即Protal传送门，“悬念”
5. Better TypeScript support：更优秀的Ts支持
6. Custom Renderer API：暴露了自定义渲染API

• 为什么要大版本迭代 （Why）

1. 主流浏览器对新的JavaScript语言特性的普遍支持。
2. 当前Vue代码库随着时间的推移而暴露出来的设计和体系架构问题。

• 他是如何提升的（How）

1. 响应式系统提升： 使用Proxy提升了响应式的性能和功能
2. 编译优化： 标记和提升所有的静态节点，diff时只需要对比动态节点内容
3. 事件缓存： 提供了事件缓存对象cacheHandlers，无需重新创建函数直接调用缓存的事件回调
4. 打包和体积优化： 按需引入，Tree shaking支持（ES Module）

二、编码

全局API

1. 【新增】createApp： 入口文件（main.ts）挂载方式

import { createApp } from "vue";

import App from "./App.vue";



// Vue2

new Vue({

   render: (h) => h(App)

}).$mount("#app");



// Vue3

createApp(App)

  .use(**)

  .mount("#app");

2. 【修改】

config.ignoredElements替换为config.isCustomElement

引入此配置选项的目的是支持原生自定义元素，因此重命名可以更好地传达它的功能，新选项还需要一个比旧的 string/RegExp 方法提供更多灵活性的函数：

// Vue2

Vue.config.ignoredElements = [

  // 用一个 `RegExp` 忽略所有“ion-”开头的元素

  // 仅在 2.5+ 支持

  /^ion-/

]



// Vue3

const app = Vue.createApp({})

app.config.isCustomElement = tag => tag.startsWith('ion-')

Vue.prototype 替换为 config.globalProperties

在Vue 2中，Vue.prototype通常用于添加可在所有组件中访问的属性。

Vue 3中的等效项是config.globalProperties。在实例化应用程序内的组件时，将复制这些属性

// Vue2

Vue.prototype.$http = () => {}



// Vue3

const app = Vue.createApp({})

app.config.globalProperties.$http = () => {}

生命周期

新特性

1. Options API => Composition API

2. setup()

import {toRefs} from 'vue'

export default {

    name: 'demo',

    props:{

      name: String,

    },

    // setup()作为在组件内使用Composition API的入口点。

    // 执行时机是在beforeCreate和created之间,不能使用this获取组件的其他变量，

    // 而且不能是异步。setup返回的对象和方法，都可以在模版中使用。

    setup(props, context){

      // 这里需要使用toRefs来进行解构

      // 这里的props与vue2基本一致,当然这里的name也可以直接在template中使用

      const { name }=toRefs(props);

      console.log(name.value);

      

      // context是一个上下文对象

      //【从原来 2.x 中 this 选择性地暴露了一些 property（attrs/emit/slots）】

      // 属性，同vue2的 $attrs

      console.log(context.attrs);

      // 插槽

      console.log(context.slots);

      // 事件，同vue2的 $emit

      console.log(context.emit);

      // 生命周期钩子

      onMounted(() => {})

  }

}

注意点：

• 注意 props 对象是响应式的，watchEffect 或 watch 会观察和响应 props 的更新，不要解构 props 对象，那样会使其失去响应性
• attrs 和 slots 都是内部组件实例上对应项的代理，可以确保在更新后仍然是最新值。所以可以解构，无需担心后面访问到过期的值
• this在 setup()中不可用。由于 setup() 在解析 2.x 选项前被调用，setup() 中的 this 将与 2.x 选项中的 this 完全不同。同时在 setup() 和 2.x 选项中使用 this 时将造成混乱

3. 响应式reactive，ref

import { ref, reactive, toRefs } from 'vue';



setup() {

    // ref

    // ref 对我们的值创建了一个响应式引用

    const counter = ref(0); 

    

    // reactive

    // 接收一个普通对象然后返回该普通对象的响应式代理

    const obj = {a:1};

    const objReactive = reactive(obj);



    const add = () => {

      counter.value++;

      objReactive.a++;

    }

    

    return {

      counter,  // return返回会自动解套【在模板中不需要.value】

      objReactive,

      add,

    }; // 这里返回的任何内容都可以用于组件的其余部分

}

问题 & 注意点： 因为reactive是组合函数【对象】，所以必须始终保持对这个所返回对象的引用以保持响应性，不能解构该对象或者展开

例如：

const { a } = objReactive或者return { ...objReactive }

解决方法：

toRefs API

用来提供解决此约束的办法——它将响应式对象的每个 property 都转成了相应的 ref【把对象转成了ref】。

import { reactive, toRefs } from 'vue';



setup() {

    // reactive

    // 接收一个普通对象然后返回该普通对象的响应式代理

    const obj = {a:1};

    const objReactive = reactive(obj);

    

    // toRefs

    // 将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的ref

    const objRef = toRefs(objReactive);

    

    const { a } = objRef;

    const addObj = () => {

      a.value++;

      console.log(a.value, objRef, objReactive, obj);

    }



    return {

      ...objRef,

      addObj

    }; 

}

• Hooks方式

1. counter.js

import { ref } from 'vue';



export function useCounter() {

    const count = ref(0);

    const decrement = () => {

        count.value--;

    }

    const increment = () => {

        count.value++;

    }

    return {

        count,

        decrement,

        increment

    }

}

2. 父组件