目录
Vue中的响应式对象
Vue3允许在setup()中定义组件需要的数据和方法, 通过return在模板中可以直接使用
-
reactive方法
<body> <div id = "Application"> </div> <script> const App = Vue.createApp({ setup() { let myData = Vue.reactive({ value: 0 }) function click() { myData.value += 1 console.log(myData.value) } return { myData, click } }, template: ` <h1>测试数据: {{myData.value}}</h1> <button @click = "click">单击</button> ` }) App.mount("#Application") </script> </body> // 使用这个方法对自定义的JavaScript对象进行包装, 为其添加响应性
独立的响应式值
- Vue提供的ref方法来定义响应式独立值, ref方法会帮我们完成对象的包装
<body>
<div id = "Application">
</div>
<script>
const App = Vue.createApp({
setup() {
let myObject = Vue.ref(0)
function click() {
myObject.value += 1
console.log(myObject.value)
}
return {
myObject,
click
}
},
template: `
<h1>测试数据: {{myObject}}</h1>
<button @click = "click">单击</button>
`
})
App.mount("#Application")
</script>
</body>
// 在模板中使用setup中返回的使用ref定义的数据时, 数据对象会自动展开, 直接使用即可
- toRefs方法对响应式对象进行解构赋值
<body>
<div id = "Application">
</div>
<script>
const App = Vue.createApp({
setup() {
let myObject = Vue.reactive({
value: 0
})
let { value } = Vue.toRefs(myObject)
// Vue会自动将解构的数据转换成ref对象变量, 在setup方法内部使用时, 要使用其内部包装的value属性
function click() {
value.value += 1
console.log(value.value)
}
return {
value,
click
}
},
template: `
<h1>测试数据: {{value}}</h1>
<button @click = "click">单击</button>
`
})
App.mount("#Application")
</script>
</body>
计算变量
使用Vue提供的computed方法来创建计算变量
<body>
<div id = "Application">
</div>
<script>
const App = Vue.createApp({
setup() {
let a = Vue.ref(1);
let b = Vue.ref(2);
let sum = Vue.computed(() => {
return a.value + b.value
});
function click() {
a.value += 1
b.value += 2
}
return {
sum,
click
}
},
template: `
<h1>测试数据: {{sum}}</h1>
<button @click = "click">单击</button>
`
})
App.mount("#Application")
</script>
// 计算变量也支持被赋值
/**
let sum = Vue.computed({
set(value) {
a.value = 0
b.value = 0
}
get() {
return a.value + b.value
}
})
*/
</body>
监听响应式变量
Vue提供的watchEffect方法和watch方法, 无需手动指定要监听的变量
Vue.watch(param, func)
Vue.watchEffect(param, func)
setup方法
setup方法会在组件创建前执行, 即对应组件的生命周期方法beforeCreate调用之前执行
组合式API的核心方法, 代码层面上将分离的相关逻辑点进行聚合
接受两个参数props 和 context
方法中可定义声明周期行为
1.本站内容仅供参考,不作为任何法律依据。用户在使用本站内容时,应自行判断其真实性、准确性和完整性,并承担相应风险。
2.本站部分内容来源于互联网,仅用于交流学习研究知识,若侵犯了您的合法权益,请及时邮件或站内私信与本站联系,我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
5.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
暂无评论内容