Vue3 One Piece Study

目录

脚手架安装vue3

使用vue-cli创建

 使用vite创建

 setup

介绍

示例使用

ref函数

介绍

代码示例

reactive函数

介绍

代码示例

---

脚手架安装vue3

使用vue-cli创建

vue create 项目名

 

安装完成

进入到刚才创建的项目目录中

cd vue3_test 

输入npm run serve测试 

 

 

 使用vite创建

npm init vite-app 项目名

 

 

观察项目结构,使用vite创建项目和vue-cli的结构上少了node_moudle这个模块,所以需要先手动install下

 npm i 或者npm install都可以

npm run dev访问

 setup

介绍

   setup是vue3.0中的一个新的配置项 值为一个函数

   setup是所有Composition Api(组合Api)表演的舞台

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

   setup函数两种返回值:

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

       2. 若返回一个渲染函数: 则可以自定义渲染内容

注意: 尽量不要和vue2.x版本的配置进行混用

       1. vue2.x配置(data methods computed...)中可以访问到setup中的属性 方法

       2. 但在setup中不能访问到 vue2.x的配置(data,methods,computed)

       3. 如果vue2.x版本的配置和setup重名情况,则setup优先

  setup不能是一个async(异步)函数 因为返回值不再是return对象 而是promise 模板看不到return对象中的属性

示例使用

测试:

ref函数

介绍

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

语法: const xx = ref(initValue)

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

       js中操作数据: xxx.value

      模板中读取数据: 不需要.value 直接{{xxx}}

备注:

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

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

      对象类型的数据: 内部"求助" 了vue3.0中的新函数--reactive函数

代码示例

 

reactive函数

介绍

作用: 定义一个对象类型(引用类型) 的响应式数据(基本类型用ref函数)

语法: const 代理对象 = reactive(被代理对象) 接收一个对象(或数组) 返回一个代理器对象(proxy对象)

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

内部基于 es6的proxy实现 通过代理对象操作源对象内部数据都是响应式的

代码示例

这样一个一个返回数据比较麻烦,可以直接将所有所有数据定义成对象类型进行统一返回