提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue3 data property

Vue3 Data Property
2023-06-13 09:11:43 时间

组件的 data 选项是一个函数。

Vue 在创建新组件实例的过程中调用此函数。

它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。

为方便起见，该对象的任何顶级 property 也直接通过组件实例暴露出来：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>data property demo</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="michael">
        {{content}}
        <br/>
        <button abc="content" @click="mouseover">button</button>
    </div>
    <script>
        const app = Vue.createApp({
            "data":function(){
                return {
                    count:2,
                    "content":'Vue3.js'
                }
            },
            "methods":{
                "mouseover":function(){
                    alert('Vue3.js data property.')
                }
            }
        });
        const vm = app.mount("#michael")
        console.log(vm.$data)
        console.log(vm.$data.count)
        vm.count = 5
        console.log(vm.$data.count)
        vm.$data.count=8
        console.log(vm.count)
    </script>
</body>
</html>

F12查看打印web控制台打印结果如下：

data property

这些实例 property 仅在实例首次创建时被添加，所以你需要确保它们都在 data 函数返回的对象中。

必要时，要对尚未提供所需值的 property 使用 null、undefined 或其他占位的值。。

直接将不包含在 data 中的新 property 添加到组件实例是可行的。但由于该 property 不在背后的响应式 $data 对象内，所以 Vue 的响应性系统不会自动跟踪它。

Vue 使用 $ 前缀通过组件实例暴露自己的内置 API。它还为内部 property 保留 _ 前缀。应该避免使用这两个字符开头的的顶级 data property 名称。

【小结】

任何知识都是越学越明白...

相关文章