[GN] Vue3快速上手1

本文主要是介绍[GN] Vue3快速上手1，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

---

前言

Vue2 展示

<template><div class="person"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年龄+1</button><button @click="showTel">点我查看联系方式</button></div>
</template><script lang="ts">export default {name:'App',data() {return {name:'张三',age:18,tel:'13888888888'}},methods:{changeName(){this.name = 'zhang-san'},changeAge(){this.age += 1},showTel(){alert(this.tel)}},}
</script>

使用 vue-cli 创建 VUE3.0

官方文档：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

VUE 3.0 介绍

Composition API

vue 3.0 作为组合式API

首要配置 setup

setup执行很早，在beforeCreate之前执行一次。

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

<template><div class="person"><h2>姓名：{{name}}</h2><button @click="changAge">年龄+1</button></div>
</template><!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">console.log(this) //undefined// 数据（注意：此时的name、age、tel都不是响应式数据）let age = 18// 方法function changAge(){console.log(age)age += 1 //注意：此时这么修改age页面是不变化的}
</script>

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

ref函数

• 作用: 定义一个响应式的数据
• 语法: const xxx = ref(initValue)
• 返回值一个RefImpl的实例对象，简称ref对象，ref对象的value属性是响应式的。
  • JS中操作数据： xxx.value。模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
  • 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。

<script setup lang="ts" >import {ref} from 'vue'// name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。let name = ref('张三')function changeName(){// JS中操作ref对象时候需要.valuename.value = '李四'console.log(name.value)// 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。// name = ref('zhang-san')}
</script>

reactive函数

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

<script lang="ts" setup >
import { reactive } from 'vue'// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([{ id: 'ahsgdyfa01', name: '英雄联盟' },{ id: 'ahsgdyfa02', name: '王者荣耀' },{ id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({a:{b:{c:{d:666}}}
})// 如果下面是ref 则需要在第二个位置加上value 例：game.value[0].name = '大马猴'
function changeCarPrice() {car.price += 10
}
function changeFirstGame() {games[0].name = '流星蝴蝶剑'
}
function test(){obj.a.b.c.d = 999
}
</script>

1. ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。
2. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。

toRefs与 toRef

  // 数据let person = reactive({name:'张三', age:18, gender:'男'})// 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力let {name,gender} =  toRefs(person)// 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力let age = toRef(person,'age')

计算属性与监视

1.computed函数

<template><div class="person">姓：<input type="text" v-model="firstName"> <br>名：<input type="text" v-model="lastName"> <br>全名：<span>{{fullName}}</span> <br></div>
</template><script setup lang="ts" name="App">import {ref,computed} from 'vue'let firstName = ref('zhang')let lastName = ref('san')// 计算属性——既读取又修改let fullName = computed({// 读取get(){return firstName.value + '-' + lastName.value},// 修改set(val){ //将改变的值 导入val  在分解分别付给firstname lastnameconsole.log('有人修改了fullName',val)firstName.value = val.split('-')[0]lastName.value = val.split('-')[1]}})function changeFullName(){fullName.value = 'li-si'} 
</script>

2.watch函数

• 两个小“坑”：

  • 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
  • 监视reactive定义的响应式数据中某个属性时：deep配置有效。

  //情况一：监视ref定义的响应式数据const stopWatch = watch(sum,(newValue,oldValue)=>{console.log('sum变化了',newValue,oldValue)if(newValue >= 10){stopWatch()}
  })/* 监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视watch的第一个参数是：被监视的数据watch的第二个参数是：监视的回调watch的第三个参数是：配置对象（deep、immediate等等.....） 
  */
  watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)
  },{deep:true})/* 情况三：监视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)
  },{deep:true}) //情况五：监视reactive定义的响应式数据中的某些属性
  watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{console.log('person的job变化了',newValue,oldValue)
  },{deep:true})//特殊情况
  watch(()=>person.job,(newValue,oldValue)=>{console.log('person的job变化了',newValue,oldValue)
  },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效
  

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

这篇关于[GN] Vue3快速上手1的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---