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 因为其本身就代替这两个函数
import { defineComponent,onBeforeMount,onMouted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmouted } from 'vue'
setup(){
// 对应 beforeMount 挂载前
onBeforeMount(() => { 代码 })
// 对应 mounted 挂载后
onMouted(() => { 代码 })
// 对应 beforeUpdate 更新前
onBeforeUpdate(() => { 代码 })
// 对应updated更新后
onUpdated(() => { 代码 })
// 对应beforeDestroy 销毁前
onBerforeUnmount(() => { 代码 })
// 对应 destroyed 销毁后
onUnmounted(() => { 代码 })
}
})
(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
import { defineComponent,ref,reactive} from 'vue'
(3) 方法的定义与使用
在vue2.0中方法都写在methods中，而在vue3没有这样的要求，它和变量的定义有点像，都只需要在最后的return中写上就好了
import { defineComponent } from 'vue'
export default defineComponent(){
setup(){
// 第一种方式
const example = ()=>{
fn() // 调用fn
}
example() // 调用example
// 第二种方式
function fn(){
// 调用example
}
fn() // 调用fn
return {
example,
fn
}
}
}
以前变量和方法的定义是分散的，现在变成这样的话就可以把方法用到的变量和方法写在一起了，变成了一个整体的模块。
作者：博客园-DDjans，转载时请注明来源。
(请勿将文章用在任何商业用途，违者将承担相应法律责任)
