VUE官方文档学习---VUE实例

---

title: VUE官方文档学习—VUE实例
date: 2021-6-1 16:56:06
author: Xilong88
tags: Vue

Vue实例

通过new 关键字 创建 一个Vue 的实例，其中要传入一个property对象参数，options。

比如传入data，可以作为响应式的值

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property 改变这个属性，视图不会更新。
也就是说，只有在视图初次渲染前，也就是实例创建时，data里面的参数才会与视图动态绑定。

所以说，设置初值就可以动态绑定了，有些刚开始用不到，后面要用的，可以设为空值，比如：

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

如果对data指向的数据对象obj，使用过Object.freeze(obj),那么就不能再动态响应了，还会报错。

data相当于一个私有的成员，不能直接访问，但是可以通过$data访问它指向的对象，比如：

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` 改变后调用
})

总之就是Vue暴露了一些前缀为$的实例property或者方法，就非常有用。

生命周期：vue每个阶段都有一个生命周期钩子函数，提供给用户在相应阶段进行操作的可能。

比如created钩子：

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

选项和生命周期的回调不能用箭头函数，因为它们的this是指向创建时的执行上下文。

这个地方官方文档没有讲好，官方文档说：

说的是箭头函数没有this，很明显不对，箭头函数的this绑定的是创建时的执行上下文，这里就绑定的window对象。

<script>
	const vm = new Vue({
		el:'#app',
		data:{
			message:"你好朱熙龙！"
		},created:()=>{
			console.log(this);
		}
	})
</script>

控制台打印了window，说明我的想法是正确的。

这张图是vue的生命周期图

里面的话，injections和reactivity还不太理解什么意思，然后挂载和模板还有render也不太懂什么意思，后面应该会慢慢了解。

今天研究了一下虚拟DOM

大概是这样，操作DOM是一件非常浪费资源的事，也就是说单次操作DOM成本很高，这个是问题。

所以我们用JavaScript的对象去模拟DOM，也就是虚拟DOM，相当于用更少的内容来表示DOM，然后我们每次更改的时候，不直接操作DOM，而是先去用diff算法对比之前的虚拟DOM和现状的虚拟DOM有何不同，然后再决定如何操作DOM。

这样做并没有解决DOM操作慢的问题，而是尽量减少DOM操作，也就是说，一本书10元，10本100元，虚拟DOM就是让书变成了6本，或者更少，这样就变成了60元。

然后vue框架不需要程序员直接用虚拟DOM，但是vue的底层还是用了。