Vue实例，数据，生命周期--【Vue入门】

---

前言

前一段时间开始学习spring，在学习前后端数据交互时遇到了数据交互的问题，老师推荐我们使用Vue框架进行前端数据接收。由于我本身对前端框架了解甚少（只用过Layui）于是就根据官网文档（链接: 官方文档.）进行学习

---

一、Vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

二、实例

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

<script type="text/javascript">
    var vm = new Vue({
    })
</script>

官方文档：一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ TodoButtonDelete
   │  └─ TodoButtonEdit
   └─ TodoListFooter
      ├─ TodosButtonClear
      └─ TodoListStatistics

没看明白（哈哈哈哈），白话就是说：一个创建好的Vue可以进行组装！（还不明白往下看看）。

三、数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重新渲染。但是需要注意只有当实例被创建时就已经存在于data中的property才是响应式的。如果一开始data里面没有b，则vm.b="123"是不会起作用的，那如果我需要怎么办（看下面，咱们可以提前添加一个b（我称为站位））

<!--
    当一个 Vue 实例被创建时，它将 Data 对象中的所有的 property 加入到 Vue 的响应式系统中。
    当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。（样例看标志1）
-->
<div id = "Data">
<!--    输出绑定到Data对象上的a值-->
    {{a}}
    {{b}}
</div>
<script type="text/javascript">
<!--    创建的数据对象-->
    var Data = {a:"Hello word!",b:""}
    var vm = new Vue({
        el:'#Data',
        //将数据对象绑定到Vue的data属性上
        data:Data //相当于data:{a:"Hello word!"}
    })
//可以在浏览器控制台观察（如下图）
//标志1，--------此时已经将Data数据对象绑定到vm对象上，现在改变Data的数据
// Data.a="vm对象受到影响"
//如果改变vm里面的数据，Data也会改变
// vm.a="Data也会受影响"
// vm.b="123"
</script>

未改变任何数据以前

Data.a=“vm对象受到影响”，改变Data数据对象，则绑定数据对象的vm也会改变

vm.b=“123”，让一开始定义的b显示出来。

But。。。。。。。如果我想要我定义的vm对象里面的数据不再发生变化该怎么办？？？？,
当然有办法》》》我们可以使用Object.freeze()，这个东西会帮我们阻止修改现有的vm对象，也就意味着响应系统无法在追踪变化。

<div id="app">
    {{foot}}
    <button v-on:click="foot = 'abc'">改变foot对应的数据</button>
</div>

<script type="text/javascript">
 var obj = {foot:"bar"}
    Object.freeze(obj)
    var vue = new Vue({
        el:'#app',
        data: obj
    })
</script>

除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：

<script type="text/javascript">
var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

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

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

三、实例生命周期钩子

每一个Vue实例在被创建的时候都要经历一系列的初始化过程–例如，需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。同时在运行过程中也会运行一些叫做生命周期钩子的函数，给用户在不同阶段添加自己代码的机会。
生命周期钩子包括：create mounted updated destroyed。

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