Vue 实例

创建VUE实例有点类似构造函数var一个值再new

1
2
3
var vm = new Vue({
    //content
})

vue应用通过new Vue 创建


根vue实例注意要大写V，一个vue应用是由可选可嵌套的组件构成拿office文档举例

1
2
3
4
5
6
7
8
根实例 
└─ TodoList   例子盒子
    ├─ TodoItem     盒子的小项目
    │ ├─ DeleteTodoButton     小项目中的删除键
    │ └─ EditTodoButton        小项目中的编辑键
    └─ TodoListFooter     盒子的底部
            ├─ ClearTodosButton           清除todos            
            └─ TodoListStatistics            统计todo

数据与方法

当一个 Vue 实例被创建时，它将data对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
例如：


当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时data中存在的属性才是响应式的。也就是说如果你添加一个新的属性，比如：


和单例模式的data一样你知道你后面会使用到一些值所以可以在data中设置好

Object.freeze()

它可以阻止更新内容让系统无法跟踪

1
2
3
4
5
var obj = { foo: 'bar' } 

Object.freeze(obj) 

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

那么使用到{ foo }的标签将不会更新

关于$data带有前缀

他们是一些有用的实例属性及方法他们带有$以便与用户自定义属性区分开来 具体参考 传送门再此)

生命钩子的理解

以下来CSDN自闰土大叔的讲解

当面试官问：“谈谈你对vue的生命周期的理解”，听到这句话你是不是心里暗自窃喜：这也太容易了吧，不就是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 这几个钩子函数么，创建=>挂载=>更新=>销毁，So easy ！！！
生命周期图


不能随意使用箭头函数因为箭头函数的this指向的是最顶层的而不是实例vm
不要在选项属性或回调上使用箭头函数，比如created: () => console.log(this.a)或vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直至找到位置，经常导致Uncaught TypeError: Cannot read property of undefined或Uncaught TypeError: this.myMethod is not a function之类的错误。