数据和跟踪数据的方法

文档https://cn.vuejs.org/v2/guide/instance.html#%E6%95%B0%E6%8D%AE%E4%B8%8E%E6%96%B9%E6%B3%95

api

https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B-property

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
    <title>LeetCode -baicaihenxiao</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- My Stylesheets -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/baicaihenxiao/js@latest/cserclub-common.css">

    <link rel="shortcut icon" type="image/jpg" href="https://gitee.com/baicaihenxiao/imageDB/raw/master/luxun.jpg">
</head>

<body>
    <div id="app-datas">
      {{ a }}
    </div>

<!-- JavaScript -->
<script type="text/JavaScript">
    

    // 只有当实例被创建时就已经存在于 data 中的属性才是响应式的，后面加的不行。
    // 响应的意思是你改了某个值界面上显示的值也会变。
    // Object.freeze() 会阻止修改现有的 property，也意味着响应系统无法再追踪变化。
    var data1 = { a: "Asdasdsa" }
    
    var appDatas = new Vue({
      el: '#app-datas',
      data: data1
    })
    
    var unwatch = appDatas.$watch('a', function (newValue, oldValue) {
        console.log(oldValue, newValue); // 这个回调将在 `vm.a` 改变后调用
    })
    
    data1.a = "new aaa"
    appDatas.$data.a = "bew aaa" // 两个赋值连在一起，watch只打印了一次。
    
    console.log(appDatas.a === data1.a) // => true
    console.log(appDatas.$el === document.getElementById('app-datas')) // => true
    
    // unwatch(); $watch返回的取消观察函数，用来停止触发回调：
    // data1.a = "unwa aaa"
     

</script>
 
</body>
</html>
Previous基本使用Nextnew Vue() 实例生命周期钩子

Last updated

Was this helpful?