[JavaScript知识库]vue 2.x 随笔 1-入门

0. mvvm 模型

参考阮总博客，还就那个轻松愉快 …
阮一峰 MVC,MVP和MVVM的图示

1.computed

实现：相当于为该对象的protype声明了一个getter
缓存：计算属性依赖于响应式依赖进行(即渲染时重新计算)

2.watch

一个好的选择：通过监听状态来减少一个大函数的调用

3.prop

声明时候，注意’-'和驼峰风格的使用
可以声明一个对象封装所有property,然后直接赋值v-bind
注意单向数据流 & js引用传递 的影响
prop属性中可以设置类型验证、默认、自定义验证函数
有了 inheritAttrs: false 和 $attrs，你就可以手动决定这些 attribute 会被赋予哪个元素

4.Vue内置函数

全局均可以引用(即Vue.xxx()),可简写作$xxx()

4.1 $el

找到dom元素

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

4.2 $set

vue实例对象(官网写作’vm’)创建之后添加新的属性到实例上，它不会触发视图更新,因此直接使用data.xxx = xxx的赋值方式，并且该属性getter/setter没有被声明时候，这将导致vue的v-vm绑定失败,因此这样修改之后是无法动态响应到view的

vue响应系统 ,把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter,如上示例，可以将data在控制台打印出来看

new Vue({
	data:(){
		return {
			queryParam:{},	//这么写,是一个空对象，该对象将自动声明存取器，但是内部属性未显式声明，将不具备存取器
			//queryParam:{time:'',}	//这么写，将自动具备存取器
			},
		};
	},
	mounted:function(){
		this.queryParam.time = xxx;	//这样是无法生效的,因为此时this.queryParam.time对象并没有getter/setter
		this.$set(this.queryParam,'time',xxx);
	},
});

4.3 $nextTick

当赋值数据时候，dom初始化完成。因此对未来更新后的视图进行操作可以使用这个

dom未初始化，常发生在vue生命周期钩子中

mounted()并不能保证所有的子组件全部完成挂载

new Vue({
	...
  mounted:function() {
    get: function () {
      this.$http.get('/api/article').then(function (res) {
        this.list = res.data.data.list
        // ref  list 引用了ul元素，我想把第一个li颜色变为红色
        this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
      })
    },
  }
})

5.vm的一些内置属性的加载顺序

见源码:

function initState (vm) {
        vm._watchers = [];
        var opts = vm.$options;
        if (opts.props) { initProps(vm, opts.props); }
        if (opts.methods) { initMethods(vm, opts.methods); }
        if (opts.data) {
            initData(vm);
        } else {
            observe(vm._data = {}, true /* asRootData */);
        }
        if (opts.computed) { initComputed(vm, opts.computed); }
        if (opts.watch && opts.watch !== nativeWatch) {
            initWatch(vm, opts.watch);
        }
    }