|
小伙伴们开始学习vue3了嘛? ? 以下是俺的笔记? ? ?
总结? ?了解跟多看? ? 1.响应式? ? ? 直接使用看? ? 2.响应式
1.响应式
注：ref和reactive都需要引入，不管是方法还是数据，都需要在setup最后return才可以在Dom使用
（1）用ref
在vue3中ref（不同vue2中绑定在dom上的，那个ref依旧可以在vue3继续使用） ，vue中的ref函数可以实现响应式，只需要将你在setup中定义的数据，用ref裹就可以。
在使用ref中：
如果是简单数据类型，需要读取，如果是要在dom上读取数据，直接写数据名字就可以，见下方dom上age读取，如果是需要在js部分使用，读取需要用（你要修改的数据名字）.value 见下方hello中name的读取；?但是如果你需要修改需要用（你要修改的数据名字）.value去进行修改，比如下面代码块hello2中age的修改
如果是复杂数据类型，需要读取，如果是要在dom上读取数据，直接写数据名字就可以，见下方dom上obj.sex读取，如果是需要在js部分使用，读取需要用（你要修改的对象名字）.value?.(你要修改的对象中数据名字)见下方hello中name的读取；
（2）用reactive
? ? reactive只能包裹复杂数据类型，不支持简单数据类型，会报错
? ?在定义复杂数据类型后，值直接用reactive包裹，如下方likeGirl 的定义，修改跟使用跟vue2中一样
注意? ?咱们写的是vue3,没有this
<template>
<h1 @click="hello2">{{ age }}</h1>
<h1 @click="hello2">{{ obj.sex }}</h1>
<h1 @click="addGirl">女孩：{{ likeGirl }}</h1>
<!-- <h1 @click="hello2">{{ age }}</h1> -->
</template>
<script>
import {ref,reactive} from 'vue'
export default {
name: "App",
setup() {
let name = ref("小蜜瓜");
let age = ref(12);
let obj = reactive({
name:'南瓜',
sex:'女'
})
let likeGirl = reactive(['倪妮','刘浩存'])
function hello2() {
age.value = 13
console.log(obj)
obj.sex = '不详'
likeGirl[0]='孙'
}
function addGirl(){
likeGirl.push('XX')
}
let hello = () => {
alert(`我是${name.value}`);
};
return {
addGirl,
likeGirl,
obj,
age,
name,
hello,
hello2,
};
},
};
</script>
<style>
</style>
2.响应式
综上所述? 你一定觉得vue3好麻烦? ? ?所以直接像下面这样用，没错直接用reactive 包裹一个大的对象，里面写好你要用的数据，立马实现响应式
<template>
<h1>{{ info.age }}</h1>
姓：<input v-model="info.xing" /> 名：<input v-model="info.ming" /><br>
全名 : <span>{{info.oneName}}</span>
全名 : <input v-model="info.oneName" />
喜欢女孩:<p>{{info.likeGirl}}<p/>
</template>
<script>
import { reactive } from "vue";
export default {
name: "Demo",
setup() {
let info = reactive({
name: "小蜜瓜",
xing: "王",
ming: "延欣",
likeGirl: ["宋佳", "刘浩存"],
age: 12,
obj: {
name: "南瓜",
sex: "女",
},
});
return {
info,
};
},
};
</script>
<style>
</style>
|