Vue3（工程创建 setup ref，reactive函数）

vue3带来了什么：

• 性能的提升
• 源码的升级
• 拥抱TypeScript
• 新的特性

创建Vue3.0工程

使用vue-cli创建

##查看@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

使用vite创建

vite---新一代前端构建工具

优势如下：

• 无需打包，快速冷启动
• 轻量快速的热重载（HMR）
• 真正的按需编译，不再等待整个应用编译完成。

##创建工程
npm init vite-app 

##进入工程目录
cd 

##安装依赖
npm install

##运行
npm run dev

分析工程结构

引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数

vue3书写不再需要根标签了

语法检查关闭提示

安装开发者工具

chrome网上应用商店---选择beta版本

常见Composition API

初识setup

1. 理解：vue3.0中一个新的配置项，值为一个函数。
2.setup是所有Composition API （组合API)“表演的舞台”。
3. 组件中所用到的：数据、方法等等，均要配置在setup中。
4.setup函数的两种返回值：

• 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点）
• 若返回一个渲染函数：则可以自定义渲染内容。（了解）

5. 注意点：
   尽量不要与vue2.x配置混用
    • vue2.x配置 (data、methos、computed.）中可以访问到setup中的属性、方法。
    • 但在setup中不能访问到Vue2.x配置 (data、methot、computed..) 。
    •如果有重名，setup优先。
 setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。

ref函数

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

语法：const  xxx  =  ref（initValue）

       模板中读取数据：

{{age}}

       JS中操作数据：xxx.value

Reflmpl  (reference  引用 ) (implement  实现 ) 

通过引用对象加工

备注：

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

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

对象类型的数据：内部“求助”了 Vue3的新函数-------reactive函数 

reactive函数 

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

语法：const 代理对象 = reactive（源对象）接收一个对象（或数组），

           返回一个代理对象（Proxy的实例对象，简称proxy对象）

• reactive定义的响应式数据是“深层次的”。
• 内部基于ES6的proxy实现，通过代理对象操作源对象内部数据进行操作。

reactive对比ref

从定义数据角度对比：

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

从原理角度对比：

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

从使用角度对比：

• ref定义：操作数据需要.value，读取数据时模板中不需要.value
• reactive定义：均不需要.value