Vue 实例被创建时

最新推荐文章于 2023-12-18 15:37:22 发布

yuanshuai1136

最新推荐文章于 2023-12-18 15:37:22 发布

阅读量1k

点赞数

当一个Vue 实例被创建时，它向 Vue 的响应式系统中加入了其data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

Vue data访问

// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = newVue({
data: data
})
// 他们引用相同的对象！
vm.a === data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3

除了data 属性，Vue 实例暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

var data= { a: 1 }
var vm = newVue({
el: '#example',
data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') //=> true

// $watch 是一个实例方法
vm.$watch('a', function (newValue,oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。

比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
data: {
    a: 1
},
created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
}
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同场景下调用，如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。

[html]view plain copy 
   
 <!DOCTYPE html>  
 <html style="height: 100%;">  
   
     <head>  
         <meta charset="UTF-8">  
         <script type="text/javascript" src="../lib/vue.v2.5.12.js"></script>  
         <title>v-xxx</title>  
     </head>  
   
     <body style="height: 100%;">  
         <style>  
             .style0 {  
                 font-size: 25px;  
                 color: green;  
             }  
               
             .style1 {  
                 background: gold;  
             }  
         </style>  
         <!--   
             VUE实例  
                   
             REF:  
                 https://cn.vuejs.org/v2/guide/instance.html  
                 http://www.runoob.com/vue2/vue-template-syntax.html  
         -->  
         <div id="appVue">  
             <!-- VUE实例 -->  
             <div style="height: 150px;background: #CCC;margin: 5px;">  
                 <div style="font-size: 20px;">  
                     v0.VUE对象数据访问</div>  
                 <hr />  
                 <div>  
                     <div>  
                         <input v-focus/>  
                     </div>  
                 </div>  
             </div>  
         </div>  
         <script>  
             var vm = new Vue({  
                 el: "#appVue",  
                 data: {  
                     msg: "ABCDEFG",  
                     msg1: "abcdefg",  
                     chPart: "Key",  
                     digPart: "123456",  
                 },  
                 computed: {  
                     reverseMsg: function() {  
                         return this.msg.split('').reverse().join('')  
                     },  
                     fullName: {  
                         get: function() {  
                             return this.chPart + this.digPart;  
                         },  
                         set: function(newVar) {  
                             this.chPart = newVar;  
                             this.digPart = newVar;  
                         }  
                     }  
                 },  
                 methods: {  
                     reverseMsg1: function() {  
                         return this.msg1.split('').reverse().join('')  
                     }  
                 }  
             })  
             // 每个Vue实例都会代理其data对象里所有的属性  
             console.log(vm.reverseMsg);  
             vm.msg = "AAABBB";  
             console.log(vm.reverseMsg);  
             vm.fullName = "Null";  
             // Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，  
             // 以便与代理的 data 属性区分  
             vm.$data.msg = "Null";  
         </script>  
     </body>  
   