【VUE3】setup语法糖(computed 使用+watch监听)

一、定义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);
})