Vue基础(二)实例

谁践踏了优雅 2022-12-01 11:45 154阅读 0赞

Vue实例化是通过 new Vue()实现的, Vue3.0就不是这么干了, 当然这是以后的事.

Vue实例化就会将数据 data 遍历通过 Object.defineProperty() 来让 data 中的**属性获取getter和setter**, 从而可以**监听数据的改变**.

这个也和 Vue3.0有很大的不同, 因为 Object.defineProperty() 的限制, Vue 不能检测数组和对象的变化. 所以 Vue 做了一些额外的工作.有关 Vue 响应式的一些原理可以在以后参考:  [https://cn.vuejs.org/v2/guide/reactivity.html][https_cn.vuejs.org_v2_guide_reactivity.html]

Vue 是响应式的, 所以数据的改变可以被监听到从而能触发视图的更新, 这样开发者只需要管理数据就可以了, 不需要涉及实体 DOM 操作, 页面的渲染全部交给 Vue 的虚拟 DOM 树来实现.

## 数据和方法 ##

// 我们的数据对象
    var data = { a: 1 }
    
    // 该对象被加入到一个 Vue 实例中
    var vm = new Vue({
      data: data
    })

以上是官方的示例, 将 data 对象放入 vue 实例的 data, 从而将对象数据实现开头说的响应式操作, 将 data 对象挂载到生成的 vue 实例上. 这时候他们共享同一个引用, 所以 vm.$data === data, 无论修改哪一个对象都会造成数据的改变.

只有在 vue 实例化时的 data 里的属性会变成响应式的, 后来添加的不可以, 除非使用官方的 api 操作(Vue.$set或vm.$set)

除了 data 保存**数据**之外, 还可以在**方法**中获取并修改数据.

<div id="app">
        {
       { message }}
        <button v-on:click="reverseMessage"> Reverse Message </button>
    </div>

上面的HTML看起来很熟悉又有点陌生, 陌生是因为使用了 vue 模板语法及事件处理指令. 双大括号包裹的 message 会被 vue 替换成下面的 message 的字符串, 而 v-on: 就是 HTML 的监听指令, 这里用于监听点击事件

var vm = new Vue({
        // 如果在实例化时存在el，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。
        // 将一个 DOM 元素作为 Vue 实例的挂载目标, 挂载元素会被 Vue 生成的 DOM 替换。
        el: '#app', 
        data: {
            message: 'hello world!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('');  // 反转字符串
            }
        }
    });

当点击按钮时, 就会将 message 字符串反转, 页面也可以看到反转后的字符串.

## 实例生命周期钩子 ##

vue 实例从创建到销毁经历了很多个生命周期, 下面是官方提供的生命周期图示:

![format_png][]

当然我们最常用的一般就是created及mounted, 在使用需要清理工作的第三方插件时也会用到beforeDestroy.

更多详情查看: [https://cn.vuejs.org/v2/guide/instance.html][https_cn.vuejs.org_v2_guide_instance.html]

[https_cn.vuejs.org_v2_guide_reactivity.html]: https://cn.vuejs.org/v2/guide/reactivity.html
[format_png]: /images/20221123/3cccad8f9d6c4b90b021cd210636050b.png
[https_cn.vuejs.org_v2_guide_instance.html]: https://cn.vuejs.org/v2/guide/instance.html