vue3新特性中的setup(),ref(),reactive()函数
setup()函数的用法,可以代替 Vue2 中的 date 和 methods 属性,直接把逻辑写在setup 里就可以ref() 函数用法,是更新简单的变量reactive()函数用法,更新复杂类型的变化(数组/对象)注:return出去的数据和方法,在模板中才可以使用,这样可以精准的控制暴漏的变量和方法案例 删除某个数据如图:template<ul v-for="(item,index
·
setup() 函数的用法,可以代替 Vue2 中的 data 和 methods 属性,直接把逻辑写在 setup 里就可以
从定义的角度:
ref() 用来定义:基本类型的变量
reactive()函数用来定义:更新复杂类型的变化(数组/对象)
从原理角度来说:
1.ref通过Object.defineProperty()的get和set来实现响应式(数据劫持)
2.reactive是通过Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部的数据
从使用角度:
1.ref定义的数据:操作数据需要.value,读取数据时候模版中直接读取不需要.value
2.reactive定义数据:操作和读取均不需要.value
注: return
出去的数据和方法,在模板中才可以使用,这样可以精准的控制暴漏的变量和方法
案例 删除某个数据如图:
template
<ul v-for="(item,index) in studentList.list" :key="item.name">
<li @click="deleteStudent(index)">姓名是:{{ item.name }}--成绩是:{{ item.gard }}</li>
</ul>
js( 第一种写法:)
<script lang="ts">
//复杂类型的变化(数组/对象)
import { reactive } from "vue";
export default {
setup() {
const studentList = reactive({
list: [
{
name: "张三",
gard: 90,
},
{
name: "李四",
gard: 80,
},
{
name: "王五",
gard: 50,
},
],
});
const deleteStudent = (index: number) =>{
console.log(index);
studentList.list.splice(index,1);
}
return {
studentList,
deleteStudent
};
},
};
</script>
第二种写法(定义个函数,将每个对应的逻辑单独出来)
//复杂类型的变化(数组/对象)
import { reactive } from "vue";
//学生函数
function studentsFun(){
const studentList = reactive({
list: [
{
name: "张三",
gard: 90,
},
{
name: "李四",
gard: 80,
},
{
name: "王五",
gard: 50,
},
],
});
const deleteStudent = (index: number) =>{
console.log(index);
studentList.list.splice(index,1);
}
return {studentList,deleteStudent};
}
export default {
setup() {
const {studentList,deleteStudent} = studentsFun();
return {
studentList,
deleteStudent
};
},
};
更多推荐
已为社区贡献15条内容
所有评论(0)