Vue.javascript源码分析(四)基础篇响应式原理data属性

夏天,他把手中的魔法棒轻轻一挥,带给咱们一片充满活力的蓝色。你瞧,蓝蓝的天空飘着朵朵白云,远处,蔚蓝的大海在夏风的吹拂下,卷起层层浪花。

官网对data属性的介绍如下:

意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方法。

Vue内部实现时用到了ES5的Object.defineProperty()这个API,也正是这个原因,所以Vue不支持IE8及以下浏览器(IE8及以下浏览器是不支持ECMASCRIPT 5的Object.defineProperty())。

以一个Hello World为例,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">{{message}}</div>
    <button id="b1">测试按钮</button>
    <script>
        var app = new Vue({
            el:'#app',
            data:{                                                    //data里保存着Vue实例的数据对象,这里只有一个message,值为Hello World!
                message:"Hello World!"     
            }
        })
        document.getElementById('b1').addEventListener('click',function(){         //在b1这个按钮上绑定一个click事件,内容为修正app.message为Hello Vue!
            app.message='Hello Vue!';
        })
    </script>
</body>
</html>

本文Vue.javascript源码分析(四)基础篇响应式原理data属性到此结束。人有没有信念并非取决于铁链或任何其他外在的压力。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

vue如何实现列表固定列滚动

vue如何实现伸缩菜单功能

vue项目中canvas如何实现截图功能