setup() 和 ref() 的使用

使用setup()新语法，可以不需像之前vue2语法需要写data了。

<template>
  <div class="home">
    <div>语言名称: {{classname}}</div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'Home',
  setup(props) {
    const classname = ref('javascript')
    return {
      classname,
    }
  },
}
</script>

vue2中声明的变量需要放在data中声明使用。

vue3.X在setup函数中，通过 ref 和 rective 代替以前的 data 语法，return返回出去后，才可以在模板页面上直接使用，包括变量和方法。

setup() 方法是在 beforeCreate() 生命周期函数之前执行的函数；

它接收两个参数 props 和 context。
它里面不能使用 this，而是通过 context 对象来代替当前执行上下文绑定的对象。
context 对象有四个属性：attrs、slots、emit、expose

使用 setup 语法糖时，不用写 export default {}，只需要 import 子组件就直接使用，不需要像以前一样在 components 里注册。

vue2中修改data中的变量，在methods中定义方法，通过事件触发修改变量。

vue3.X中逻辑：

通过ref声明的变量在赋值的时候，是对变量.value去进行赋值和读取操作；

事件方法不在需要声明在methods中，直接写在setup函数中；

 

通过ref声明的变量更改需要通过变量.value的方式去修改。很不符合vue2之前书写代码的习惯。vue3.X中提供的reactive方法更符合些。