vue3 入门

VUE3入门 前言1.性能的提升2.源码的升级3.拥抱TypeScript4.新的特性 创建vue工程起步Composition APISetupref函数方法中改变ref数据ref改变对象 reactive函数计算属性watch函数监听ref监听reactive监听整个reactive对象 监听reactive中的某个属性 watchEffect函数生命周期变化

前言

2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王

对比于vue2
进行了以下的优化

1.性能的提升

打包大小减少41%

初次渲染快55%, 更新渲染快133%

内存减少54%

…

2.源码的升级

使用Proxy代替defineProperty实现响应式

重写虚拟DOM的实现和Tree-Shaking

…

3.拥抱TypeScript Vue3可以更好的支持TypeScript 4.新的特性 Composition API（组合API） setup配置ref与reactivewatch与watchEffectprovide与inject… 新的内置组件 FragmentTeleportSuspense 其他改变 新的生命周期钩子data 选项应始终被声明为一个函数移除keyCode支持作为 v-on 的修饰符。。。 创建vue工程

在我前面写的vite入门中 介绍了 vite创建vue3项目
但是我们现在还是用脚手架来创建

接着和vue2创建的适合没什么区别

起步

我们打开main.js
发现有很多不同

我们对比vue2的配置并且分析一下

然后我们打开App.vue
发现template中没有跟标签
这是因为 在vue3中 是可以没有根标签的

Composition API

Composition API 又名组合式API
我们要知道 我们常用的vue2使用的是OptionAPI
简单的说就是我们熟悉的 data， computed ， method等等
但是在vue3中 我们并不建议使用OptionAPI

在Vue2中 我们一个功能得分不同的许多地方 比如
数据放在data中 方法放在methods中 分开的特别散乱 一两个功能还好 但是页面可能功能很多 这就会显得特别的杂乱无章
为此
Vue3 提出了 Composition API
它可以把 **一个逻辑的代码都收集在一起 **
然后单独写个hook 并引入 这样就不会到处分布

Setup

Setup是vue3中新增的一给配置项 值为一个函数
我们可以在组件的script中添加 setup
由于3.2的更新 我们不再需要return


这里我们需要注意的是

尽量不要与Vue2.x配置混用 Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。但在setup中不能访问到Vue2.x配置（data、methos、computed…）。如果有重名, setup优先。 setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合） ref函数

在我们vue2中 ref被拿来打标识 类似于id
但在vue3中 ref是作为函数来定义一个响应式的数据
语法
先引入
import {ref} from “vue”
然后使用
let（const或者var 也可以）xxx = ref(数据的初始值)

我们把ref定义的数据 叫做引用实现的实例对象
简称引用对象

语法规则如下：

创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。JS中 *** 作数据： xxx.value模板中读取数据: 不需要.value，直接：{{xxx}} 备注： 接收的数据可以是：基本类型、也可以是对象类型。基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数 方法中改变ref数据

如下
需要给引用对象加上.value

ref改变对象

reactive函数

和ref类似
但是reactive函数定义的是对象类型的响应式数据
语法
const 代理对象 = reactive （源对象）接受一个对象或者数组
返回一个
代理对象 （Proxy的实例对象 简称Proxy对象）

案例如下

<template>
<p>姓名:{{obj.name}}</p>
<p>年龄:{{obj.age}}</p>
<button @click ='add()'>点击变化</button>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
// 语法
const obj = reactive({
  name: '张三',
  age:18
})
function add(){
  obj.name = '小丑'
  obj.age = 24
}
</script>

计算属性

与Vue2.x中computed配置功能一致

<script lang="ts" setup>
import { reactive,computed } from 'vue'
// 语法
interface Ix {
  name :string,
  age: number
}
const obj:Ix = reactive({
  name: '张三',
  age:18
})
// function add(){
//   obj.name = '小丑'
//   obj.age = 24
// }
obj.name = computed(():string=>{
  return `${obj.name}名字`
}).value

obj.age = computed<number>({
  get(){
     return obj.age+ 5
  },
  set(value){
     value
  }
}).value
</script>

watch函数 监听ref

与Vue2.x中watch配置功能一致

<script lang ='ts' setup>
import {reactive,ref,watch} from 'vue'

// 监视1个
const age = ref(10)
const name = ref('张三')
const sex = ref('男')
// watch(age,(newval,oldval) => {
//   console.log(newval);
//   console.log(oldval); 
// })
// ========
// 监视多个

// watch([age,name,sex],(newval,oldval) => {
//   console.log(`新值${newval}`);
//   console.log(`旧值${oldval}`); 
// })

// 添加属性
watch([age,name,sex],(newval,oldval) => {
  console.log(`新值${newval}`);
  console.log(`旧值${oldval}`); 
},{immediate:true, deep:true})

</script>

监听reactive 监听整个reactive对象

问题：
1 强制深度监听
2 无法正确获取oldval

import {reactive,ref,watch} from 'vue'
interface Iobj {
  name: string
  age : number
  sex :  string 
} 
const people:Iobj = reactive({
  name:'小丑',
  age: 19,
  sex :'男'
})

watch(people,(newval,oldval)=>{
  console.log(newval);
  console.log('================================================================');
  console.log(oldval);
})

监听reactive中的某个属性 watchEffect函数

 2 监听reactive对象中的某个属性
 deep配置有效

 watch(()=>people.name,(newval,oldval)=>{
   console.log(newval);
  console.log('===========');
  console.log(oldval);
 })

在watchEffect函数中 我们想要监听哪个属性 就在里面添加哪个属性
使用时有点类似于computed（计算属性）

但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。
生命周期变化