vue3组件内写法的变化(核心篇)——vue2和vue3的基础用法对比第四篇

组件内的使用：

(1) 生命周期 (2) 变量的定义与使用 (3) 方法的定义与使用 (4) 父子组件间的数据交互  (5) computed计算属性和watch的使用

组件中常用的东西无非上面5种，其中(4)、(5)在下一篇文章中介绍

在vue3中最大的变化莫过于vue组件内写法的变化了。之前的是data、methods、computed、生命周期等每一个功能都是相对独立的模块，但是vue3中所有的东西都被包含setup函数里，编写的方式发生了翻天复地的变化。

(1) 生命周期

说到setup()，setup这个函数是在数据创建之前，也就是说在原本的created生命周期之前。因此在setup里面就不能用之前的生命周期了，所有vue3出了新的写法。

setup里面没有 beforeCreate 和 created 因为其本身就代替这两个函数　　

important { defineComponent,onBeforeMount,onMouted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmouted } from

export default defineComponent({

　　name:"lifecycle",

　　setup(){

　　　　// 对应 beforeMount 挂载前

　　　　onBeforeMount(() => { 代码 }) 

　　　　// 对应 mounted 挂载后

　　　　onMouted(() => { 代码 }) 

　　　　// 对应 beforeUpdate 更新前

　　　　onBeforeUpdate(() => { 代码 })  

　　　　// 对应updated更新后

　　　　onUpdated(() => { 代码 })

　　　　// 对应beforeDestroy 销毁前

　　　　onBerforeUnmount(() => { 代码 }) 

　　　　// 对应 destroyed 销毁后

　　　　onUnmouted(() => { 代码 }) 

　　}

})

 (2) 变量的定义与使用

vue2.0版本是在data定义的当前组件的全局变量，但是vue3.0中没有规定要在哪里写了，只要写在最后的return就好了

setup(){
　　const a=1,b=2

　 //如此就定义了一个的当前组件的全局变量

　　return{a,b}
}

但是上面写的只是普通的变量，vue2.0中在data写的变量还有最重要的功能就是都是响应式变量，那么在vue3改怎么定义响应式的变量呢？

vue3中又两种方式，一种是ref，另外一种是reactive。一般来说ref是用来定义基本类型的，reactive是用来定义引用类型的，当然用ref来定义引用类型也了可以他会自动转化为reactive来定义。

注意：用ref定义的变量在使用时要加.value 即 变量名.value

important { defineComponent,ref,reactive} from

export default defineComponent({

　　name:"variable",

　　setup(){　　

　　　　//ref的用法

　　　　const a = ref(1)

　　　　a.value //获取a的值

　　　　const arr = ref([1,2,3])

　　　　arr.value[0] //获取arr的第一个值

　　　　//reactive的用

　　　　const b = reactive({

　　　　　　x:1,

　　　　　　y:2

　　　　})

　　　　b.x //获取b的x

　　　　return{a,arr,b} 

　　}

})　　

 (3)  方法的定义与使用

在vue2.0中方法都写在methods中，而在vue3没有这样的要求，它和变量的定义有点像，都只需要在最后的return中写上就好了

important { defineComponent } from

export default defineComponent(){

　　setup(){

　　　　//第一种方式

　　　　const example = ()=>{

　　　　　　fn() //调用fn

　　　　}

　　　　example() //调用example

　　　　// 第二种方式

　　　　function fn(){

　　　　　　//调用example 

　　　　}

　　　　fn() //调用fn

　　　　return {

　　　　　　　example,

　　　　　　　fn

　　　　}

　　}

}

以前变量和方法的定义是分散的，现在变成这样的话就可以把方法用到的变量和方法写在一起了，变成了一个整体的模块。