快速上手Vue3

最新推荐文章于 2024-11-05 15:26:40 发布

知一zz

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量94

点赞数

分类专栏：快速上手Vue3 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/2201_75625882/article/details/131099821

版权

快速上手Vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue3引入了setup函数和CompositionAPI，setup在beforeCreate和created之间，内部不使用this。ref和reactive用于创建响应式对象，前者用于基本类型，后者用于复杂数据结构。生命周期变为组合API，需要从vue导入并声明。此外，计算属性和watch也进行了调整，更易于组织业务逻辑。

摘要由CSDN通过智能技术生成

一、 vue3 兼容vue2的语法

setup函数是处于beforeCreate和created两个钩子之间的函数,由于组件的实例还没实例化完成，所以内部不能使用this
setup是composition api(组合api)的入口。组合api是vue3 内置的一些函数
vue3的业务逻辑都是写在setup函数里面，vue3里面就不要用vue2的相关属性。
vue3的setup函数内部创建的变量或者方法必须要return 出去，template才能读取到

二、常用组合api

1.引入vue3的ref组合api，ref是一个方法，可以创建一个响应式对象

let name = ref("小明")
// ref返回的响应式对象，值是放入到value属性的
// console.log(name.value)

注意：模板里面使用ref响应式对象的值，不需加value属性

2.reactive 和ref类似，reactive主要用于创建复杂的引用数据类型结构(如果对象，数组等)

reactive创建的响应式对象则直接是放在对象上面。

let peo = reactive({name:'a1',age:11})
// console.log(pro.name)

3.vue3的生命周期被做成了组合api，需要哪个声明周期要从vue里面引入

/从 vue 中引入 多个生命周期函数
import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated,
onBeforeUnmount, unMounted} from 'vue'
export default {
name: 'App',
setup() {
onBeforeMount(() => {
// 在挂载前执行
})
onMounted(() => {
// 在挂载后执行
})
onBeforeUpdate(() => {
// 在更新前前执行
})
onUpdated(() => {
// 在更新后执行
})
onBeforeUnmount(() => {
// 在组件销毁前执行
})
unMounted(() => {
// 在组件销毁后执行
})
return {}
}

4.vue3可以很轻松的分割业务逻辑代码

用ES6引入方法注意，引入文件和引入组件略有差异

引入文件：{ }内是文件名。" "里是来自那个文件夹

引入组件：前面的是组件的命名，后面是组件路径

import { count, addCount } from "./count" 
import Home from "./components/Home.vue"

5.计算属性,需要从vue引入computed函数


const money = ref(10)
// 写方法直接在setup里面写即可
const changeMOney = (num)=>{
      money.value += num
 }    
 const newMoney = computed(function(){
   return "￥" + money.value*0.2
 })

6.watch监听，需要从vue引入 watch函数

const count=ref(0)
const addCount = (num)=>{
    count.value+=num
}
// newVal是监听数据的最新值，oldVal是监听数据的老值
watch(count,function(newVal,oldVal){
    console.log("监听count变化",newVal,oldVal)
})

三、setup

setup 属性则表示script标签里面的代码都是在setup函数内部，并且自动return到外部，template模板可以直接使用js里面的变量

<script setup>
   import { ref } from "vue"
   // setup属性标签里面需要用defineProps语法糖定义props
   const props = defineProps(["name"])
   
   console.log(props.name)
</script>