乐趣区

关于前端:vue3学习日记

jiezi

Vue3 疾速上手

1.Vue 3 简介

  • 2020 年 9 月 18 日，Vue.js 公布 3.0 版本，代号：One Piece（海贼王）
  • 耗时 2 年多、2600+ 次提交、30+ 个 RFC、600+ 次 PR、99 位贡献者
  • github 上的 tags 地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0

2.Vue3 带来了什么

1. 性能的晋升

  • 打包大小缩小 41%
  • 首次渲染快 55%, 更新渲染快 133%
  • 内存缩小 54%
    ……

2. 源码的降级

  • 应用 Proxy 代替 defineProperty 实现响应式
  • 重写虚构 DOM 的实现和 Tree-Shaking
    ……

3. 拥抱 TypeScript

  • Vue3 能够更好的反对 TypeScript

4. 新的个性

  1. Composition API（组合 API）

    • setup 配置
    • ref 与 reactive
    • watch 与 watchEffect
    • provide 与 inject
    • ……

  2. 新的内置组件

    • Fragment
    • Teleport
    • Suspense

  3. 其余扭转

    • 新的生命周期钩子
    • data 选项应始终被申明为一个函数
    • 移除 keyCode 反对作为 v-on 的修饰符
    • ……

一、创立 Vue3.0 工程

1. 应用 vue-cli 创立

官网文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 查看 @vue/cli 版本，确保 @vue/cli 版本在 4.5.0 以上
vue --version
## 装置或者降级你的 @vue/cli
npm install -g @vue/cli
## 创立
vue create vue_test
## 启动
cd vue_test
npm run serve

2. 应用 vite 创立

官网文档：https://v3.cn.vuejs.org/guide/installation.html#vite
vite 官网：https://vitejs.cn

  • 什么是 vite？—— 新一代前端构建工具。

  • 劣势如下：

    • 开发环境中，无需打包操作，可疾速的冷启动。
    • 轻量疾速的热重载（HMR）。
    • 真正的按需编译，不再期待整个利用编译实现。
  • 传统构建 与 vite 构建比照图
## 创立工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 装置依赖
npm install
## 运行
npm run dev

二、罕用 Composition API

官网文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

1. 拉开序幕的 setup

  1. 了解：Vue3.0 中一个新的配置项，值为一个函数。
  2. setup 是所有Composition API（组合 API）“表演的舞台”。
  3. 组件中所用到的：数据、办法等等，均要配置在 setup 中。

  4. setup 函数的两种返回值：

    1. 若返回一个对象，则对象中的属性、办法, 在模板中均能够间接应用。（重点关注！）
setup(){
    // 数据
    let name = '张三'
    let age = 18
    
    // 办法
    function sayHello(){alert(` 我叫 ${name}，我 ${age}岁了，你好啊 `)
    }
    // 返回一个对象（罕用）return {name,age,sayHello}
  }
  2.  若返回一个渲染函数：则能够自定义渲染内容。（理解）
setup(){
    // 数据
    let name = '张三'
    let age = 18
    
    // 办法
    function sayHello(){alert(` 我叫 ${name}，我 ${age}岁了，你好啊 `)
    }
    // 返回一个函数（渲染函数）return ()=>{return h('h1','尚硅谷')}
  }

  1. 留神点：

    1. 尽量不要与 Vue2.x 配置混用

      • Vue2.x 配置（data、methos、computed…）中 能够拜访到setup 中的属性、办法。
      • 但在 setup 中 不能拜访到Vue2.x 配置（data、methos、computed…）。
      • 如果有重名, setup 优先。
    2. setup 不能是一个 async 函数，因为返回值不再是 return 的对象, 而是 promise, 模板看不到 return 对象中的属性。（前期也能够返回一个 Promise 实例，但须要 Suspense 和异步组件的配合）

2.ref 函数

ref reference 援用
impl implement 实现

  • 作用: 定义一个响应式的数据

  • 语法: const xxx = ref(initValue)

    • 创立一个蕴含响应式数据的 援用对象（reference 对象，简称 ref 对象）。
    • JS 中操作数据：xxx.value
    • 模板中读取数据: 不须要.value，间接：<div>{{xxx}}</div>

  • 备注：

    • 接管的数据能够是：根本类型、也能够是对象类型。
    • 根本类型的数据：响应式仍然是靠 Object.defineProperty() 的get与 set 实现的。
    • 对象类型的数据：外部“求助”了 Vue3.0 中的一个新函数—— reactive函数。

3.reactive 函数

  • 作用: 定义一个 对象类型 的响应式数据（根本类型不要用它，要用 ref 函数）
  • 语法：const 代理对象 = reactive(源对象)接管一个对象（或数组），返回一个 代理对象（Proxy 的实例对象，简称 proxy 对象）
  • reactive 定义的响应式数据是“深层次的”。
  • 外部基于 ES6 的 Proxy 实现，通过代理对象操作源对象外部数据进行操作。

4.Vue3.0 中的响应式原理

vue2.x 的响应式

  • 实现原理：

    • 对象类型：通过 Object.defineProperty() 对属性的读取、批改进行拦挡（数据劫持）。
    • 数组类型：通过重写更新数组的一系列办法来实现拦挡。（对数组的变更办法进行了包裹）。
Object.defineProperty(data, 'count', {get () {}, 
    set () {}
})

  • 存在问题：

    • 新增属性、删除属性, 界面不会更新。
    • 间接通过下标批改数组, 界面不会自动更新。

Vue3.0 的响应式

  • 实现原理:

    • 通过 Proxy（代理）:  拦挡对象中任意属性的变动, 包含：属性值的读写、属性的增加、属性的删除等。
    • 通过 Reflect（反射）:  对源对象的属性进行操作。

    • MDN 文档中形容的 Proxy 与 Reflect：

      • Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
      • Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
new Proxy(data, {
    // 拦挡读取属性值
    get (target, prop) {return Reflect.get(target, prop)
    },
    // 拦挡设置属性值或增加新属性
    set (target, prop, value) {return Reflect.set(target, prop, value)
    },
    // 拦挡删除属性
    deleteProperty (target, prop) {return Reflect.deleteProperty(target, prop)
    }
})

proxy.name = 'tom'

5.reactive 比照 ref

  • 从定义数据角度比照：

    • ref 用来定义：根本类型数据。
    • reactive 用来定义：对象（或数组）类型数据。
    • 备注：ref 也能够用来定义 对象（或数组）类型数据 , 它外部会主动通过reactive 转为 代理对象。

  • 从原理角度比照：

    • ref 通过 Object.defineProperty() 的get与 set 来实现响应式（数据劫持）。
    • reactive 通过应用 Proxy 来实现响应式（数据劫持）, 并通过 Reflect 操作 源对象 外部的数据。

  • 从应用角度比照：

    • ref 定义的数据：操作数据 须要 .value，读取数据时模板中间接读取 不须要.value。
    • reactive 定义的数据：操作数据与读取数据：均不须要.value。

6.setup 的两个留神点

  • setup 执行的机会

    • 在 beforeCreate 之前执行一次，this 是 undefined。

  • setup 的参数

    • props：值为对象，蕴含：组件内部传递过去，且组件外部申明接管了的属性。

    • context：上下文对象

      • attrs: 值为对象，蕴含：组件内部传递过去，但没有在 props 配置中申明的属性, 相当于 this.$attrs。
      • slots: 收到的插槽内容, 相当于 this.$slots。
      • emit: 散发自定义事件的函数, 相当于 this.$emit。

7. 计算属性与监督

1.computed 函数

  • 与 Vue2.x 中 computed 配置性能统一
  • 写法
import {computed} from 'vue'

setup(){
    ...
    // 计算属性——简写
    let fullName = computed(()=>{return person.firstName + '-' + person.lastName})
    // 计算属性——残缺
    let fullName = computed({get(){return person.firstName + '-' + person.lastName},
        set(value){const nameArr = value.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })
}

2.watch 函数

  • 与 Vue2.x 中 watch 配置性能统一

  • 两个小“坑”：

    • 监督 reactive 定义的响应式数据时：oldValue 无奈正确获取、强制开启了深度监督（deep 配置生效）。
    • 监督 reactive 定义的响应式数据中某个属性时：deep 配置无效。
// 状况一：监督 ref 定义的响应式数据
watch(sum,(newValue,oldValue)=>{console.log('sum 变动了',newValue,oldValue)
},{immediate:true})

// 状况二：监督多个 ref 定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{console.log('sum 或 msg 变动了',newValue,oldValue)
}) 

/* 状况三：监督 reactive 定义的响应式数据
            若 watch 监督的是 reactive 定义的响应式数据，则无奈正确取得 oldValue！！若 watch 监督的是 reactive 定义的响应式数据，则强制开启了深度监督 
*/
watch(person,(newValue,oldValue)=>{console.log('person 变动了',newValue,oldValue)
},{immediate:true,deep:false}) // 此处的 deep 配置不再见效

// 状况四：监督 reactive 定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{console.log('person 的 job 变动了',newValue,oldValue)
},{immediate:true,deep:true}) 

// 状况五：监督 reactive 定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{console.log('person 的 job 变动了',newValue,oldValue)
},{immediate:true,deep:true})

// 非凡状况
watch(()=>person.job,(newValue,oldValue)=>{console.log('person 的 job 变动了',newValue,oldValue)
},{deep:true}) // 此处因为监督的是 reactive 素定义的对象中的某个属性，所以 deep 配置无效

3.watchEffect 函数

  • watch 的套路是：既要指明监督的属性，也要指明监督的回调。
  • watchEffect 的套路是：不必指明监督哪个属性，监督的回调中用到哪个属性，那就监督哪个属性。

  • watchEffect 有点像 computed：

    • 但 computed 重视的计算出来的值（回调函数的返回值），所以必须要写返回值。
    • 而 watchEffect 更重视的是过程（回调函数的函数体），所以不必写返回值。
//watchEffect 所指定的回调中用到的数据只有发生变化，则间接从新执行回调。watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect 配置的回调执行了')
})

8. 生命周期

  • Vue3.0 中能够持续应用 Vue2.x 中的生命周期钩子，但有有两个被更名：
  • beforeDestroy改名为 beforeUnmount
  • destroyed改名为 unmounted

  • Vue3.0 也提供了 Composition API 模式的生命周期钩子，与 Vue2.x 中钩子对应关系如下：

    • beforeCreate===>setup()
    • created=======>setup()
    • beforeMount ===>onBeforeMount
    • mounted=======>onMounted
    • beforeUpdate===>onBeforeUpdate
    • updated =======>onUpdated
    • beforeUnmount ==>onBeforeUnmount
    • unmounted =====>onUnmounted

9. 自定义 hook 函数

  • 什么是 hook？—— 实质是一个函数，把 setup 函数中应用的 Composition API 进行了封装。
  • 相似于 vue2.x 中的 mixin。
  • 自定义 hook 的劣势: 复用代码, 让 setup 中的逻辑更分明易懂。

10.toRef

  • 作用：创立一个 ref 对象，其 value 值指向另一个对象中的某个属性。
  • 语法：const name = toRef(person,'name')
  • 利用:   要将响应式对象中的某个属性独自提供给内部应用时。
  • 扩大：toRefs 与 toRef 性能统一，但能够批量创立多个 ref 对象，语法：toRefs(person)

三、其它 Composition API

1.shallowReactive 与 shallowRef

  • shallowReactive：只解决对象最外层属性的响应式（浅响应式）。
  • shallowRef：只解决根本数据类型的响应式, 不进行对象的响应式解决。

  • 什么时候应用?

    • 如果有一个对象数据，构造比拟深, 但变动时只是外层属性变动 ===> shallowReactive。
    • 如果有一个对象数据，后续性能不会批改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

2.readonly 与 shallowReadonly

  • readonly: 让一个响应式数据变为只读的（深只读）。
  • shallowReadonly：让一个响应式数据变为只读的（浅只读）。
  • 利用场景: 不心愿数据被批改时。

3.toRaw 与 markRaw

  • toRaw：

    • 作用：将一个由 reactive 生成的 响应式对象 转为 一般对象。
    • 应用场景：用于读取响应式对象对应的一般对象，对这个一般对象的所有操作，不会引起页面更新。

  • markRaw：

    • 作用：标记一个对象，使其永远不会再成为响应式对象。

    • 利用场景:

      1. 有些值不应被设置为响应式的，例如简单的第三方类库等。
      2. 当渲染具备不可变数据源的大列表时，跳过响应式转换能够进步性能。

4.customRef

  • 作用：创立一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式管制。
  • 实现防抖成果：
<template>
    <input type="text" v-model="keyword">
    <h3>{{keyword}}</h3>
</template>

<script>
    import {ref,customRef} from 'vue'
    export default {
        name:'Demo',
        setup(){// let keyword = ref('hello') // 应用 Vue 筹备好的内置 ref
            // 自定义一个 myRef
            function myRef(value,delay){
                let timer
                // 通过 customRef 去实现自定义
                return customRef((track,trigger)=>{
                    return{get(){track() // 通知 Vue 这个 value 值是须要被“追踪”的
                            return value
                        },
                        set(newValue){clearTimeout(timer)
                            timer = setTimeout(()=>{
                                value = newValue
                                trigger() // 通知 Vue 去更新界面},delay)
                        }
                    }
                })
            }
            let keyword = myRef('hello',500) // 应用程序员自定义的 ref
            return {keyword}
        }
    }
</script>

5.provide 与 inject

  • 作用：实现 祖与后辈组件间 通信
  • 套路：父组件有一个 provide 选项来提供数据，后辈组件有一个 inject 选项来开始应用这些数据

  • 具体写法：

    1. 祖组件中：
setup(){
    ......
    let car = reactive({name:'飞驰',price:'40 万'})
    provide('car',car)
    ......
}
  2.  后辈组件中：
setup(props,context){
    ......
    const car = inject('car')
    return {car}
    ......
}

6. 响应式数据的判断

  • isRef: 查看一个值是否为一个 ref 对象
  • isReactive: 查看一个对象是否是由 reactive 创立的响应式代理
  • isReadonly: 查看一个对象是否是由 readonly 创立的只读代理
  • isProxy: 查看一个对象是否是由 reactive 或者 readonly 办法创立的代理

四、Composition API 的劣势

1.Options API 存在的问题

应用传统 OptionsAPI 中，新增或者批改一个需要，就须要别离在 data，methods，computed 里批改。

2.Composition API 的劣势

咱们能够更加优雅的组织咱们的代码，函数。让相干性能的代码更加有序的组织在一起。

五、新的组件、

1.Fragment

  • 在 Vue2 中: 组件必须有一个根标签
  • 在 Vue3 中: 组件能够没有根标签, 外部会将多个标签蕴含在一个 Fragment 虚构元素中
  • 益处: 缩小标签层级, 减小内存占用

2.Teleport

  • 什么是 Teleport？—— Teleport 是一种可能将咱们的 组件 html 构造 挪动到指定地位的技术。
<teleport to="挪动地位">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3> 我是一个弹窗 </h3>
            <button @click="isShow = false"> 敞开弹窗 </button>
        </div>
    </div>
</teleport>

3.Suspense

  • 期待异步组件时渲染一些额定内容，让利用有更好的用户体验

  • 应用步骤：

    • 异步引入组件
import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
  • 应用 Suspense 包裹组件，并配置好default 与 fallback
<template>
    <div class="app">
        <h3> 我是 App 组件 </h3>
        <Suspense>
            <template v-slot:default>
                <Child/>
            </template>
            <template v-slot:fallback>
                <h3> 加载中.....</h3>
            </template>
        </Suspense>
    </div>
</template>

六、其余

1. 全局 API 的转移

  • Vue 2.x 有许多全局 API 和配置。

    • 例如：注册全局组件、注册全局指令等。
// 注册全局组件
Vue.component('MyButton', {data: () => ({count: 0}),
  template: '<button @click="count++">Clicked {{count}} times.</button>'
})

// 注册全局指令
Vue.directive('focus', {inserted: el => el.focus()
}

  • Vue3.0 中对这些 API 做出了调整：

    • 将全局的 API，即：Vue.xxx调整到利用实例（app）上
      | 2.x 全局 API（Vue
      ）| 3.x 实例 API (app

      )
      Vue.config.xxxx app.config.xxxx
      Vue.config.productionTip 移除
      Vue.component app.component
      Vue.directive app.directive
      Vue.mixin app.mixin
      Vue.use app.use
      Vue.prototype app.config.globalProperties

2. 其余扭转

  • data 选项应始终被申明为一个函数。

  • 适度类名的更改：

    • Vue2.x 写法
.v-enter,
.v-leave-to {opacity: 0;}
.v-leave,
.v-enter-to {opacity: 1;}
  • Vue3.x 写法
.v-enter-from,
.v-leave-to {opacity: 0;}

.v-leave-from,
.v-enter-to {opacity: 1;}
  • 移除keyCode 作为 v-on 的修饰符，同时也不再反对config.keyCodes

  • 移除 v-on.native 修饰符

    • 父组件中绑定事件
<my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>
  • 子组件中申明自定义事件
<script>
  export default {emits: ['close']
  }
</script>
  • 移除 过滤器（filter）

过滤器尽管这看起来很不便，但它须要一个自定义语法，突破大括号内表达式是“只是 JavaScript”的假如，这不仅有学习老本，而且有实现老本！倡议用办法调用或计算属性去替换过滤器。

  • …….
退出移动版