一、定义data

//定义data 
//vue2

<script>
  export default {
    data(){
      retrun{
       aa:""
      }
    }
  }
</script>

//Vue3 通过 ref 和 rective 代替以前的 data 语法，在setup语法糖中直接使用，无需return 出去
<script setup>
  //首先需要引入
  import { ref ， reactive } from "vue"
  //定义一个数据
  const aa = ref("") //ref(false) //ref([])//ref({})
  //查看或者修改的时候需要在数后面加一个value。
  console.log(aa.value)
  aa.value = 1
  
  //reactive 主要是用来处理复杂的数据类型，比如对象和数组。
  //所以当你传递的是非对象时，页面不会发生响应 
  //错误示范 
  // let error = reactive(err)
  //正确示范
  let right = reactive({
    name:"张三"
  })
  //修改值得时候
  right.name = "李四"
</script>

二、computed 使用

<template>
  <div class="box">
    <!-- 在上方调用即可，结果为169 -->
    {{add}}
  </div>
</template>
<script setup>
import { computed, ref } from "vue"; 
let num1 = ref(13);
let num2 = ref(13); // 设置个变量接收 
let add = computed(() => {  
  return num1.value * num2.value; 
});
</script>

三、watch监听

使用watch也需要引入，使用方式与vue2相差不大，不同的是，监听多个属性的时候，要写多个watch。

import { watch } from "vue"

watch(() => brand.brand, (newVal) => {
    console.log(newVal)
    })
}, { deep: true,immediate:true }
)

如果写到一起的话，就会出现其中一个值变化，下面的方法都会触发，不能独立监听。

watch(()=>[user.value, password.value],([newUser, newPassword],[oldUser, oldPassword])=>{
  console.log('我是新的user值'+newUser);
  console.log('我是旧的的user值'+oldUser);
  console.log('我是新的pass值'+newPassword);
  console.log('我是旧的的pass值'+oldPassword);
})