vue3.x——@vue/cli、vite、setup、ref、reactive

最新推荐文章于 2023-03-14 22:49:29 发布

原创最新推荐文章于 2023-03-14 22:49:29 发布 · 539 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html5 #vue-cli3 #ref

javascript 同时被 3 个专栏收录

124 篇文章

订阅专栏

Vue

87 篇文章

订阅专栏

es6

73 篇文章

订阅专栏

Vue3带来了显著的性能提升，如打包体积减小41%，初次渲染速度提升55%等。它引入了Composition API，使用proxy替代defineProperty实现响应式，并重写了虚拟DOM。此外，Vue3更好地拥抱了TypeScript，提供了Fragment、Teleport等新内置组件，并调整了生命周期钩子和数据选项。创建Vue3项目可通过@vue/cli或vite。setup函数成为新配置，ref和reactive分别用于响应式的基本类型和对象类型数据。Vue3的响应式原理基于Proxy和Reflect，解决了Vue2的一些问题。

Vue3

1.性能的提升

1.1 打包带下减少41%

1.2 初次渲染快55%，更新渲染快133%

1.3内存减少54%

…

2.源码的升级

2.1 使用proxy代替defineProperty实现响应式

2.2重写虚拟dom的实现和Tree-Shaking

…

3.拥抱TypeScript

3.1 Vue3可以更好的支持TypeScript

4.新的特性

4.1 Composition API（组合API）

setup配置

ref与reactive

watch与watchEffect

provide与inject

…

4.2 新的内置组件

Fragment

Teleport

Suspense

4.3

新的生命周期钩子

data选项应始终被声明为一个函数

移除keyCode支持作为v-on的修饰符

…

创建vue3工程

1.使用@vue/cli创建

//查看@vue/cli版本，确保是4.5.0以上
vue --version
//安装或者升级@vue/cli
npm install -g @vue/cli
//创建项目
vue create vue_test	//后续有选项，选择vue3版本即可
//进入项目（启动）
cd vue_test
//运行
npm run serve

2.使用vite创建

vite——新一代的前端构建工具

优势：

1.开发环境中，无需打包操作，可快速的冷启动

2.经量快速的热重载（HMR）

3.真正的按需编译，不再等待整个应用编译完成

创建

//创建工程
npm init vite-app <项目名称>
//进入项目目录
cd <项目名称>
//安装依赖
npm install
//运行
npm run dev

setup

setup：Vue3.0中一个新的配置项，值为一个函数，是所有Compositio API（组合API）“表演的舞台”

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

setup函数的两种返回值：

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

2.若但会一个渲染函数：则可以自定义渲染内容

注意点：

1.尽量不要与vue2配置混用

vue2配置（data，methods，computed）中可以访问到setup中的属性、方法

但在setup中不能访问到vue2.0配置（data，methods，computed）

如果有重名，setup优先

2.setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性（后期可以返回一个Promise实例对象，但需要Suspense标签和异步导入组件的配合）

ref函数

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

语法：const xxx=ref(initValue)

创建一个包含响应式数据的引用对象（reference）

JS中操作数据：xxx.value

模板中读取数据，不需要value，直接：

备注：

接收的数据可以是：基本类型、也可以是对象类型

基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的

对象类型的数据：内部“求助”了Vue3.0中的一个新函数——reactive函数

reactive函数

作用：定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）

语法：**const 代理对象=reactive(源对象)**接收一个对象（或数组），返回一个代理对象（proxy的实例对象，简称proxy对象）

reactive定义的响应式数据是“深层次的”

内部基于ES6的proxy实现，通过代理对象操作源对象内部数据进行操作

Vue3.0中的响应式原理

vue2.0的响应式

实现原理：

对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。

数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）

存在的问题：

1.新增属性、删除属性，界面不会更新（可以解决，this.$set）

2.直接通过下标修改数组，界面不会自动更新（可以解决,this.$set.splice）

vue3.0的响应式

实现原理：

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

通过Reflect（反射）：对源对象的属性进行操作

MDN文档中描述的Proxy与Reflect（：

let obj = {
            name: 'zs',
            age: 18,
            sex: '男'
        };
const p = new Proxy(obj, {
    //拦截读取属性值
            // 读取某个属性时调用
            // target：对象，obj；propName ：属性名，
            get(target, propName) {
                /* console.log(target);
                console.log(propName);
                return 100 */
                return Reflect.get(target, propName)
            },
    //拦截设置属性值或添加属性
            // 修改：修改某个属性或追加某个属性时调用
            // value是新修改的值
            set(target, propName, value) {
                // target[propName] = value
                Reflect.set(target, propName, value)
            },
    //拦截删除属性
            // 删除属性
            deleteProperty(target, propName) {
                // delete target[propName]
                return Reflect.deleteProperty(target, propName)
            }
        })