Vue2.0笔记——Vue实例

Posted 2020-10-31

Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
    // 选项
})

当创建一个 Vue 实例时，你可以传入一个选项对象,就如前面所提到的如:data,methods,computed,watch等等。
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：

根实例Root
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

我们会在稍后的组件系统章节具体展开。

数据和方法

只要是包含在Vue实例中的属性都是响应式的。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。
如果你晚些需要使用到某个属性，你可以为它定义初始值，以防止后面无法直接使用到属性。

当然，可以不对属性进行响应式追踪，Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再_追踪_变化。

var obj = {
    foo: ‘bar‘
}

Object.freeze(obj)

new Vue({
    el: ‘#app‘,
    data: obj
})

除了数据属性，还暴露了实例的属性和方法，他们都有前缀$,如$set,$delete,$watch,以便于用户自定义的属性区分开来。
这些属性方法在下节述说。可以查看官方API

生命周期

跟其他语言实例对象一样，Vue实例也有自己的生命周期。
而这些生命周期中的过程，运行的一些函数叫生命周期钩子
这些函数分别为:

• beforeCreate //实例刚创建，为监视或配置属性，事件，只进行了new操作
• created //创建实例已经完成，并完成了属性的监视和事件配置
• beforeMount //模板编译之前，未挂载，数据还未显示到视图已依旧为模板{{}}
• mounted //模板编译之后，已经挂载，渲染页面，显示数据
• beforeUpdate //组件更新之前执行
• updated //组件更新之后执行
• beforeDestroy //组件销毁之前执行
• destroyed //组件销毁，清理它与其它实例的连接，解绑它的全部指令及事件监听器
  举个案例：

  <div id="app">
  message:{{msg}}
  <br/>
  <button @click="changeMsg">修改message属性</button><br/>
  <button onclick="destory()">销毁实例</button>
  </div>

var vm = new Vue({
        el:‘#app‘,
        data:{
            msg:‘this is Vue Test‘
        },
        methods:{
            changeMsg(){
                this.msg = ‘此章节为Vue2.0笔记——Vue实例‘;
            }
        },
        beforeCreate(){
            alert(‘组件实例刚刚创建，还未进行数据观测和事件配置‘);
        },
        created(){  //常用！！！
            alert(‘实例已经创建完成，并且已经进行数据观测和事件配置‘);
        },
        beforeMount(){
            alert(‘模板编译之前，还没挂载‘);
        },
        mounted(){ //常用！！！
            alert(‘模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示‘);
        },
        beforeUpdate(){
            alert(‘组件更新之前‘);
        },
        updated(){
            alert(‘组件更新之后‘);
        },
        beforeDestroy(){
            alert(‘组件销毁之前‘);
        },
        destroyed(){
            alert(‘组件销毁之后‘);
        }

    })
    function destory(){
        vm.$destroy();
    }

当执行完毕后，更新会自动触发，销毁后，无法更改值。

在其中created函数和mounted函数是较为常用的钩子函数
另外:不要在选项属性或回调上使用箭头函数
比如 created: () => console.log(this.a) 或 vm.$watch(‘a‘, newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

如果此文章未能让您更明白，请参考Vue实例与生命周期