vue--mixin混入以及虚拟DOM和diff算法

最新推荐文章于 2023-03-10 17:30:13 发布

Crazy error

最新推荐文章于 2023-03-10 17:30:13 发布

阅读量298

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44937463/article/details/90577787

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

mixin混入

使用它的好处：
1. 将 options 中的配置项可以单独抽离出来，单独管理，这样方便维护
  使用：
2. 新建一个对象用来保存 options 中某一个配置项，比如： methods
3. 接下来要将我们创建好的对象混入到我们的 ViewModel 中，我们的混入形式有两种
  - 局部混入【推荐】 — ---只是在当前 vm 中才有
```
new Vue({
    mixins: [ myMixin ]
})
```
  - 全局混入 — ---在所有的vm中都会有
```
Vue.mixin({
    methods: {
        aa () {}
    }
})
```
使用代码

<div id="app">
    <button @click = "increment"> + </button>
</div>

Vue.mixin({
    methods: {
        aa () { console.log('aa') }
    }
})
var my_methods = {
    methods: {
        increment () {
            console.log( '增加' )
        }
    }
}
var vm = new Vue({
    el: '#app',
    data: {},
    // methods: {},
    watch: {},
    computed: {},
    mixins: [ my_methods ] //局部混入
})

虚拟DOM 和 Diff 算法

什么是虚拟DOM？(virtual dom) 使用虚拟DOM有什么好处？
1. 越多的真实dom操作，越损耗性能
2. 操作数据要大大的减少性能损耗，提高渲染效率
- 解决以上问题我们可以通过创建一个树形结构( 对象表示 )来表示一个DOM结构------虚拟DOM
1. VDOM的渲染流程
  1. 获取数据
  2. 根据数据创建VDOM （相当于给对象赋值）
  3. 根据VDOM渲染生成真实DOM ( 根据createElmeent('DIV') )
  4. 当数据发生改变后，又会生成新的VDOM
  5. 通过 diff 算法比对多次生成的 VDOM, 将不同的内容比对出来，然后在进行真实DOM渲染，一样的内容是不会进行渲染的，这就是VDOM 的 ‘就地复用’ | ‘惰性原则’

** Vue 2.x版本使用的就是 VDOM ( 虚拟DOM ) **

jsx 在vue采用的原因
- VDOM对象树太繁琐了，如果能像hom结构一样书写就好了，这就引入了 jsx
render函数是做什么的
- jsx始终还是不能直接去用的，必须转换成对象才能使用，vue中使用render函数解析jsx语法，然后换成对象结构，在通过 createElment 生成节点，渲染成真实DOM