vue一些笔记20200403

vue是渐进式框架：

你可以只用做模板引擎，或者加上vue提供的路由，或者加上全局状态管理vuex，或者直接使用vue-cli直接搭建项目。你可以在现有程序使用vue，也可以用vue搭建工程。

vue核心是响应式：

通过对data数据变更实现页面更新。

vue的mvvm理解：

view视图层，viewModel是vue的实例，也就是vm(new Vue)，model数据，也就是vue里面的data。

vue响应式原理;l

vue通过发布订阅和数据劫持的方法对数据进行监听，会给每个默认属性进行监听，深层次的也会递归进行监听，会对改变原数组的数组方法进行函数劫持。因为要对数据进行递归监听，这也是vue性能的一个痛点。到了vue3用proxy进行重写，不需要递归监听，但是proxy兼容性不好。

vue数据不更新到页面：

之前分享过vue数据不更新渲染，其实是错的，vue只能监听默认的属性，数组的索引发生变化或者改变数组长度也不会触发更新。比如你在data定义一个obj: {}，然后在其它地方给obj定义一个属性，或者你定义一个数组arr,，然后直接arr[0]赋值，这些都不会进行监听，但是数据是变化的。有可能通过这两个方法页面发生变化了，那是因为有其它监听的数据发生变化，页面重新渲染，会顺带帮你把数据渲染到页面。使用ForceUpdate会强制渲染。

vue中render、template、el：

vue中如果render、template、el都存在的情况下，render优先级最高，接着是template，最后是el:

var vm = new Vue({

  render: function(h){

    return h('div', {}, '这是render属性方式渲染。')

  },

  template: '<div>这是template属性模板渲染。</div>',

  el: '#app',

});

vue中提供的template：

vue提供的template是无意义的，具有隐藏性、无效性、任意性，如果你用v-if的时候，使用template包裹，渲染的时候template会不存在。v-show不能用在template上。循环的key也不能放在template上。

v-if、v-show、v-for：

v-if是控制dom是否存在，v-shosw是控制样式display，v-if会重新渲染元素或者组件，并且重新执行涉及的函数。v-for的优先级高于v-if，性能会差一些，所以尽量不要一起使用。

v-model其实是语法糖：

v-model其实是:value和@input方法的语法糖，下面两个等价：

<input type="text" :value="msg" @input="(e) => msg = e.target.value">

<input v-model="msg">

vue组件核心：

组件的优点很多，重用、易维护、解耦等，vue中组件还有一个核心的优点，就是组件级更新，因为每个组件都有自己一个watcher，数据更新了只是重新渲染自己组件，而不会是整个页面。

.vue文件

.vue的script中的export default出去的对象，相当于Vue.extends({})里面的这个对象。import .vue文件，获取的是一个对象，可以打印看看，里面有render函数等。

$bus：

给vue挂一个new Vue，因为每个vue实例都有emit、$off的事件，用来任意组件监听、通信，但是无法控制监听命名重复，不适合大规模使用，而且必须先监听再发布：

Vue.prototype.$bus = new Vue();

image