wordpress建站多用户,wordpress利用视频引流,企业网站建设的可行性分析,网站语言编程这篇文章是基于理解写的#xff0c;仅助于理解#xff0c;如有任何错误之处#xff0c;感谢指正#xff01; 文章目录一.ref的使用1. ref的功能主要有两个#xff1a;2.使用ref注意事项二.reactive的使用三.使用ref 和 reactive 实现双向数据绑定四.toRef 和 toRefs 的使用… 这篇文章是基于理解写的仅助于理解如有任何错误之处感谢指正 文章目录一.ref的使用1. ref的功能主要有两个2.使用ref注意事项二.reactive的使用三.使用ref 和 reactive 实现双向数据绑定四.toRef 和 toRefs 的使用一.ref的使用
1. ref的功能主要有两个
使用ref 将普通数据包装成响应式 响应式的理解 在vue3中定义的普通数据是没办法在数据改变的时候将视图层页面改变的
template
//视图层divdivh1普通数据{{testa}}/h1 /divdivh1响应式数据{{testb}}/h1 /divbutton clickchange1改变普通数据/buttonbutton clickchange2改变响应式数据/button/div
/template
script setup
//逻辑层
import { ref } from vue//普通数据
let testaaaaa
//ref将普通数据包装为响应式数据
let testbref(aaa)//定义改变普通数据当点击事件调用此方法
const change1 (){
//改变普通数据 testabbb}//改变响应式数据, 使用ref包装的必须在逻辑层使用 test.value 视图层不用加value
const change2 (){testb.valuebbb
}
/script使用ref可以获取dom元素testdom.value会获取标签testdom.value.click()可以调用点击事件
templatediv//要获取的dom节点在标签内使用ref属性span reftestdom clickchangeaaa/span/div
/template
script setupimport { onMounted, ref } from vue;
//获取定义的dom节点 名称保持一致
let testdomref();//在页面挂载时打印dom节点
onMounted((){console.log(testdom.value)
})
/script结果
2.使用ref注意事项
ref是对原数据进行拷贝并不会影响原数据
//原数据
let testaaa
//使用ref包装成响应式数据
let testrefref(test)//改变响应式数据
let testref.valuebbb
//testref已经改变但是test没有改变//没有原数据直接使用响应式数据上述可以忽略
let aarefref(0)ref包装的响应式数据在使用时要使用value属性如aaref.value 。注意在视图层html中不需要使用value,在逻辑层js代码里进行赋值要使用valueref可以包装的类型
ref常见包装类型获取值数值类型ref(0)test.value字符类型ref(’1231‘)test.value空类型ref(null)test.value数组类型ref([])test.value[0]对象类型ref({name:[]})test.name.value[]
二.reactive的使用
reactive只能包装引用类型基本类型无法响应,会将基本类型包装成对象直接修改对象reative无法响应
//会将0包装成对象直接改变对象无法做出响应
let test1reactive(0)
test12
//这个可以,推荐
let test1reactive({num:0})
test1.num1
reactive 推荐使用例如 {name:aaa,list: []} 形式数据同时使用时直接test.name 不需要value
三.使用ref 和 reactive 实现双向数据绑定
要将ref 和 reactive 包装的数据 使用v-model引用一般会在表单输入框选择器等使用
ref 双向数据绑定,当视图层内容改变逻辑层的值也会改 可以获取输入框的值
templateinput v-modelinputtest /
/template
scriptlet inouttestref()
/scriptreactive 双向数据绑定 , 使用v-model与属性名绑定
template姓名input v-modeltest.name /号码input v-modeltest.mobile /
/template
scriptlet testreactive({name:,mobile:null})
/script四.toRef 和 toRefs 的使用
理解 toRef 和 toRefs 是将对象数据包装成响应式数据 只不过响应式数据绑定的是原数据 响应式数据修改的时候改变的是原数据 toRef使用 toRef会将对象的单一属性分装成响应式数据
let person{name:aaaa,password:12314}
//使用toRef 参数一是对象 参数二是要绑定的某一属性
let nametoRef(person,name)
//修改name,会同时修改对象绑定的属性值也就是person.name
name’ccc‘toRefs使用 toRefs会将对象所有属性封装成响应式数据 参数是对象 toRefs会将对象所有属性遍历 每个属性进行toRef
let person{name:aaaa,password:12314}
//对响应式对象进行解构赋值将name属性单独取出来
let {name} toRefs(person)对reactive对象使用toRefs 对普通对象使用toRefs 只会修改原数据 并不会刷新视图层 对reactive对象使用toRefs 当数据修改时 由于绑定了reactive即会修改reactive原数据 又因为reactive本身绑定了视图层又会刷新视图层 注意使用toRefs对reactive封装是将reactive的对象数据的属性封装成了ref使用时必须加.value
let person reactive({name:1231,password:14144})let nametoRefs(person)//修改name会同时修改person和视图层. 一定要加.valuename.value2222知识小贴士在script 标签内使用setup,如script setup 定义的变量和方法不用再手动return要使用的组件直接import 不需要注册 其他和setup()相同
