vue3.0 API
Ref 语法
- 作用:这是定义一个
普通数据类型响应式数据
- string,number,boolean,arr 等
- 获取 ref 的值的时候,需要通过 .value 的方式去获取到的!
- 修改 ref 定义的普通数据的时候,需要使用
XXX.value
<div>{{ count }}</div>
<button @click="countAdd">count++</button>
<button @click="getUser">点击获取用户名</button>
<input type="text" placeholder="请输入" v-model="count" />
import { defineComponent, ref } from "vue";
setup() {
const count = ref(0);
const countAdd = () => {
count.value = count.value + 1;
};
const getUser = () => {
console.log("day", count.value);
alert(count.value);
};
return {
count,
countAdd,
getUser
};
}
reactive 语法
- 作用:实现复杂数据的
响应式数据
- 定义对象 obj
- 修改 reactive 定义的对象的属性
obj.XXX
<div>用户信息 -- {{ userInfo.username }} -- {{ userInfo.age }}</div>
<button @click="getUser">点击获取用户名</button>
<button @click="setUser">点击修改用户名</button>
<input type="text" placeholder="请输入" v-model="userInfo.age" />
import { defineComponent, reactive } from "vue";
export default defineComponent({
name: "Reg",
setup() {
const userInfo = reactive({
username: "pink",
age: 20
});
const getUser = () => {
console.log("day", userInfo.age);
alert(userInfo.age);
};
const setUser = () => {
userInfo.age = 30;
};
return {
userInfo,
getUser,
setUser
};
}
});
toRefs 的作用
- toRefs 函数可以将 reactive()创建出来的响应式对象,对当前的响应式对象进行结构后,还是响应式数据,否则的话,直接使用
...
的时候,解构的并非响应式数据!
<button @click="setAge">点击修改年龄</button>
<div>
我是age: {{ age }}
<input type="text" placeholder="请输入" v-model="age" />
</div>
import { defineComponent, ref, reactive, toRefs } from "vue";
setup() {
const userInfo = reactive({
username: "pink",
age: 20
});
const setAge = () => {
userInfo.age = 30;
};
return {
setAge,
...toRefs(userInfo)
};
}
readonly 不常使用
- 作用:就是把响应式数据修改为普通数据,不具备响应式属性,只能起到只读效果
<template>
<div>
<div>
<div>
<div>原始对象</div>
<div>
<input type="text" placeholder="userName" v-model="obj.userName" />
</div>
<div>{{ obj.userName }}</div>
<div>
<div>readonly 修改响应式数据为只读效果</div>
<input type="text" placeholder="userName" v-model="user.userName" />
</div>
<div>{{ user.userName }}</div>
</div>
</div>
</div>
</template>
<script>
import { defineComponent, reactive, readonly } from "vue";
export default defineComponent({
name: "Reg",
components: {},
setup() {
// 定义一个原始对象 不具有响应式属性
let obj = {
userName: "小渣亮",
age: 30,
};
let user = reactive({
userName: "lala",
});
// 把响应式数据 转化 为原始数据 不具有响应式
user = readonly(user);
return {
obj,
user,
};
},
});
</script>
toRef
- 作用:
- 就是从响应式数据(对象)之中的某一个属性,单独拿出去使用,依旧需要转化为响应式数据
- 当这单独拿出来的数据,发生改变的时候,都是具有响应式的,和那个响应式对象也是有关联的!
- 注意点:一般来说,都是直接使用
toRefs
的方式 去转化为响应式数据的!
<template>
<div>
<div>
我是响应式数据 的username --- {{ username }}
<button @click="setUserName">修改userInfo 中的username</button>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, toRef } from "vue";
export default defineComponent({
name: "About",
components: {},
setup() {
let userInfo = reactive({
username: "pink",
age: 20,
});
// 使用 toRef的方式
// let username = toRef(userInfo, "username");
// const setUserName = () => {
// username.value = "傻屌";
// };
// 使用 toRefs的方式
const setUserName = () => {
userInfo.username = "傻屌";
};
return {
// username, 使用 toRef的方式
...toRefs(userInfo), // 使用 toRefs的方式
setUserName,
};
},
});
</script>
isRef
<template>
<div></div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, toRef, ref, isRef } from "vue";
export default defineComponent({
name: "About",
components: {},
setup() {
let userInfo = reactive({
username: "pink",
});
let count = ref(0);
console.log(isRef(count)); // true
let stateUser = toRefs(userInfo);
console.log(isRef(stateUser)); // false
console.log(isRef(stateUser.username)); // true 这是由于 使用 ...运算符展开了
return {};
},
});
</script>
unref
- 作用:
- 就是判断当前的对象,是否为响应式对象,若是就返回响应式对象,否则的话返回普通对象
- unref(obj) === isRef(obj) ? obj.value : obj;
<template>
<div></div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, unref } from "vue";
export default defineComponent({
name: "About",
components: {},
setup() {
let userInfo = {
uName: "ppp",
};
const obj = unref(userInfo);
let obj2 = reactive({
uName: "popo",
});
obj2 = unref(obj2);
// unref(obj) === isRef(obj) ? obj.value : obj; 就是判断当前的对象,是否为响应式对象,若是就返回响应式对象,否则的话返回普通对象
console.log("obj", obj, "obj2", obj2);
// 结果
// obj {uName: "ppp"} => 普通对象 ; obj2 Proxy {uName: "popo"} => 响应式对象
},
});
</script>
ref
- 作用:
- 定义一个 ref 值,获取当前节点值,可以用于修改里面的文本等!
ref 在元素上使用
<template>
<div>
<div ref="child">我是 child啊</div>
<button @click="setName">改变名称</button>
<button @click="getName">获取名称</button>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "About",
components: {},
setup() {
let child: any = ref(null);
const setName = () => {
child.value.innerText = "被修改的child";
// console.log("修改的", child.value); // 获取到当前节点 <div ref="child">我是 child啊</div>
};
const getName = () => {
console.log("获取哦", child.value); // 获取到当前节点 <div ref="child">我是 child啊</div>
};
return {
child,
setName,
getName,
};
},
});
</script>
ref 在组件之中使用
<template>
<div>
<div>
我是父组件 --- 操作子组件
<button @click="changeSonName">父修改子组件name</button>
<Son ref="son" />
</div>
</div>
</template>
<script lang="ts">
import Son from "./childCom/Son.vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "About",
components: {
Son,
},
setup() {
let son: any = ref(null);
const changeSonName = () => {
// son.value 拿到son组件的实例对象
// console.log("son", son.value);
son.value.changeCName(); // 调用子组件的 changeCName 方法
};
return {
son,
changeSonName,
};
},
});
</script>
<template>
<div>我是子组件cName --- {{ cName }}</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "Son",
components: {},
setup() {
let cName = ref("张三");
const changeCName = () => {
cName.value = "李四";
};
return {
cName,
changeCName,
};
},
});
</script>
ref 结合数组的操作
<template>
<div>
<ul>
<!-- 注意点:el就是 当前li的本身 也就是把当前的数据注入到当前li之中 -->
<li
v-for="(item, index) in arr"
:key="item.id"
:ref="
(el) => {
if (el) list[index] = el;
}
"
>
{{ item.age }}
</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
export default defineComponent({
name: "About",
components: {},
setup() {
let list = ref([]);
let arr = ref([
{
id: 1,
age: 20,
},
{
id: 2,
age: 30,
},
]);
onMounted(() => {
// list.value 可以拿到当前 list数组的每一个对象的数据
console.log("list", list.value[0]); //<li data-v-039c5b43="">20</li> 拿到当前的节点
console.log("arr", arr.value[0]); // Proxy {id: 1, age: 20} 响应式数据
});
return {
arr,
list,
};
},
});
</script>
<style lang="scss" scoped></style>