Vue---day01--数据方法与生命周期

Vue实例

在开始学习Vue实例之前需要知道

1. 每一个Vue都是通过Vue函数创建一个Vue实例开始的
2. 一个Vue应用都由 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。
3. 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。

创建Vue实例基本模板就是

			var vm = new Vue({
			//参数列表
            })

数据与方法

当创建一个Vue时，其内部的所有property都会被加入到Vue的响应式系统内，每当这些property里的值改变时，其相应的视图也会随之响应发生改变。

		<script>
            var data1 = {
                num:1
            }
            var vm = new Vue({
                data:data1
            })
            console.log(vm.num)
            vm.num=10;
            console.log(data1.num)
        </script>

这里Vue实例vm里加入了data1，从而拥有了data1里所拥有的num;然后当vm修改vm.num时，原data1中的num也会随之改变。
从而我们可以从浏览器的控制台看到。

当然重渲染的前提是data1中原本就存在num，这样才是响应式的。但是如果你重新加一个vm.b=1 的话，那么不会触发任何更新，如果你需要设置一个以后可能会用到的property，可以为他设置一个初始值
例如

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

当然也可以通过使用Object.freeze()来阻止后续的代码对property的修改

		<script>
            var data1 = {
                num:1
            }
            //  阻止后续代码对data1的修改
            Object.freeze(data1)
            var vm = new Vue({
                data:data1
            })
            console.log(vm.num)
            vm.num=10;
            console.log(data1.num)
        </script>

这样一来浏览器控制台就会报错

现在又出现了一个问题，就是除了数据的property，Vue实例自己的实例property和方法怎么进行操作呢？
可以通过加前缀 $来获取，以便于区分用户定义的property。

		<div id="exam">例子</div>
        <script>
            var data={
                a:1
            }
            var vm = new Vue({
                el:"#exam",
                data:data
            })
            console.log(vm.$data===data)
            console.log(vm.$el===document.getElementById("exam"))
        </script>

可以看到通过加前缀的方式就可以将用户定义的property和Vue实例内同名的property区分开来

---

生命周期钩子

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

例如created钩子函数就可以在Vue实例创建完成后，执行的方法代码

		<h1 id="mess">
        	{{a}}
        </h1>
        <script>
            var vm = new Vue({
                el:"#mess",
                data:{
                    a:"hi"
                },
                created:function(){
                    console.log("实例vm创建完毕"),
                    this.a="hello"
                }
            })
        </script>

从结果就很明显的看到实例一创建，created定义的代码立即就执行了
也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed生命周期钩子的 this 上下文指向调用它的 Vue 实例。

下面是官网的Vue实例的生命周期演示图