最重要：
1、data：
1）不渲染视图、不双向绑定的数据不放进data，在created中this.XXX = 定义即可；
2）data中的对象和数组的改变：
a、改变对象：
data() { return { kk: { a: 1 } } }, methods: { change() { this.kk.b = 2; //通过直接赋值改变对象，不是响应式 this.$set(this.kk, ‘b‘, 2); //用$set方法改变，是响应式 } }
b、改变数组：
data() { return { ooo: [0, 1] } }, methods: { change() { this.ooo[2] = 2; //通过数组下标改变数组，不是响应式 this.ooo.push(2); //用push、splice等方法改变，是响应式（vue重写了这几种方法） } }
2、.vue文件中this指向的内容：
1）$attrs：是props的合集，只有自定义的属性才能取到 （透传，由上往下传递）
index.vue：
<hello :tt="1234" msg="123"></hello>
hello.vue：
<template>
<div>111</div>
</template>
<script>
export default {
mounted() {
console.log(this.$sttrs); //{ ttt: ‘1234‘, msg: ‘123‘ }
}
}
</script>
2）$createElement：相当于render函数的h函数
3）$el：当前div的DOM
index.vue：
<hello v-for="v in 10" :key="v" ref="ddd"></hello> this.$refs.ddd --->[10] //10个hello组件，循环时可直接批量修改 this.$refs.ddd.forEach(x => { x.$el.innerHTML = ‘hello1‘; });
hello.vue：
<template>
<div>{{ msg }}</div> //循环10个hello1
</template>
data() {
return {
msg: ‘111‘
}
}
4）$refs：ref绑原生标签---->DOM，ref绑组件---->组件实例
index.vue：
<hello v-for="v in 10" :key="v" ref="ddd"></hello> this.$refs.ddd --->[10] //10个hello组件，循环时可直接批量修改 this.$refs.ddd.forEach(x => { x.msg = ‘hello‘; });
hello.vue：
<template>
<div>{{ msg }}</div> //循环10个hello
</template>
data() {
return {
msg: ‘111‘
}
}
5）$parent：父级元素的实例（一般不用，也不要用）
6）$listeners：与$attrs相对应，都是透传，是从下往上传递
3、$nextTick：解决mounted时，DOM没有完全渲染完的时间差（16ms）
mounted() { this.$nextTick().then(() => { ...//代码片段 }); }
4、计算属性、方法、watch比较：
1）计算属性（computed）：对数据的计算和过滤等一些简单的操作，有缓存（依赖没变、结果没变），可按照使用场景优先使用
使用场景：多个params绑定，修改单个用computed
coputed: { params: { page: this.page, pageSize: this.pageSize } } //一个改，整个计算
2）methods：不缓存，每次都运行
3）watch：数据改变后，要调接口和进一步的操作
使用场景：a、可以监听路由跳转的参数
watch: { $route(val) { ...//代码片段 } }
b、监听嵌套对象深层的某个值：
data() { return { kk: { a: { b: { c: 1 } } } } }, watch: { ‘kk.a.b.c‘: funtion(val) { ...//代码片段 } }
5、key：为了更高效的复用
较重要：
1、模块化：精简、复用（按需调用）、防止变量污染
2、AMD、CMD、commonJS、esModule（es6）：
1）AMD：define(modules, callback)：依赖前置、异步定义
2）CMD：define()：依赖就近，即用即返
3）commonJS：require()引入（图片src引入或判断引入），exports导出、运行时加载。例：
index.js：
var bar = require(‘./bar.js‘); function foo() { return bar.bar(); }
bar.js：
exports.bar = function() { console.log(‘1111‘); }
4）ES Module：在script头部用import引入，export导出、编译时加载。例：
index.js：
‘use strict‘ import bar, {foo} from ‘./bar.js‘; bar(); // 11 foo(); // 112
bar.js：
‘use strict‘; export default function bar () { console.log(‘11‘); }; export function foo () { console.log(‘112‘); }
3、vue.js包括编译和运行两部分：
1）编译：将template代码片段转成AST（抽象语法树）---->优化AST（标记静态部分不再渲染）---->AST生成render函数。
2）运行：render函数 ----> vDOM ----> DOM
mark：由于webpack的vue-loader做了预编译，因此不需要vue.js做编译，因此用vue.runtime.js（仅运行版本的vue.js）。需要做的几处改变：
1）main.js中new Vue({});中的template: ‘<App />‘, components: {App}需要改变成render: h => (App) 。
2）this.$Message没法调用，将iview源码中注册组件的components改成render函数即可。
4、data、props、methods都可代理到实例上，通过this.XXX直接调用，不通过this.$data.XXX等。this.$data---->拿到所有data中定义的数据
5、_uid是每个组件唯一的标识
6、@hook：监听子组件生命周期加载完成：
<hello @hook:mounted="kk" @hook:created="qq"></hello> kk() { //监听子组件hello的生命周期mounted完成 console.log(‘hello mounted done‘); } qq() { //监听子组件hello的生命周期created完成 console.log(‘hello created done‘); }
7、{{}}等同于v-text，用于存放DOM中的变量值，一般用{{}}，有可能会出现不解析的情况，用指令v-cloak（等编译完才显示）解决即可
2）v-html可以解析html语句，可转义，但是可能会遭到XSS攻击，因此要慎用
8、动态值的优先级更高：
<input value="22" :value="77" /> -----> value: 77
原文：https://www.cnblogs.com/minozMin/p/11176353.html