Vue来一点料

一、Vue-cli构建的项目目录

二、Vue双向数据绑定

原理

Vue遍历data对象中的所有数据,使用Object.defineProperty,将这些属性在getter/setter中处理。当属性被访问时,将所有依赖该数据的函数部分收集起来,当属性被修改时,通知watcher更新依赖该属性的部分。

不涉及视图层,仅在js中简单实现数据动态响应的功能

  //思想:在getter中收集依赖,在setter中运行依赖,更新数据
  let data={price:6,nums:3,total:0},target=null//目标函数

  //创建一个依赖,功能:保存对数据依赖的函数,运行依赖data中数性的函数
  class Dep{
    constructor(){
      this.subscribers=[]//订阅者,订阅对data属性有关联的函数等
    }
    depend(){//收集关联函数,到订阅者
      if(target&&!this.subscribers.includes(target)){
        this.subscribers.push(target)//同一个目标,只能订阅一次
      }
    }
    notify(){//数据变化,通知关联的依赖更新,也就是重新调用函数,运行
      this.subscribers.forEach(sub=>sub())
    }
  }
  //遍历属性,监控
  Object.keys(data).forEach((key)=>{
    let internalValue=data[key],dep=new Dep()
    Object.defineProperty(data,key,{
      //访问属性,会自动调用该函数
      get(){
        dep.depend()//订阅关联函数
        return internalValue
      },
      //修改属性
      set(val){
        internalValue=val
        dep.notify()//更新依赖
      }
    })
  })
  function watcher(fn){
    target=fn
    target()//target中如果访问或修改data中的属性,那么将会自动调用getter和setter
    target=null
  }
  //调用函数,开启观察
  watcher(()=>{
    data.total=data.price*data.nums
  })

控制台内输入,查看结果:


参考资料:【译】Vue.js是如何做到数据响应的?

三、VirtualDOM与diff

什么是虚拟DOM

在真实的dom中修改其一部分,可能会引起整个dom的波动,牵一发而动全身,开销较大,那么虚拟dom就是为了改变这种大开销而提出来的,他是js对象,它的目的是最小限度的修改真是的dom,来实现这个过程的就是diff算法。


diff算法只会在同层比较,不会跨层级比较,并且每次比较的结果,会立马在真实的dom中体现,不是都比较完了,在一次性改变真实的dom

diff算法步骤

中心思想
遍历newVdom中的节点,找到它在oldVdom中的位置,如果找到了就移动对应(dom:表示真实)dom元素,如果没有找到,就说明是新增加的节点,那么就新建节点插入dom。如果newVdom遍历结束了,oldVdom还有没有处理过的节点,就说明这些节点在newVdom中被删除了,那么删除即可。
vue中的diff
遍历通过在newVdom和oldVdom中设置头指针和尾指针来实现,通过移动指针来比较。处理的节点会标记为已处理(标记的方法有2种,当节点正好在vdom的指针处,移动指针将它排除到未处理列表之外即可,否则就要采用其他方法,Vue的做法是将节点设置为undefined。

节点的比较有5种情况
1、if (oldVnode === vnode),他们的引用一致,可以认为没有变化。
2、if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text),文本节点的比较,需要修改,则会调用Node.textContent = vnode.text。
3、if( oldCh && ch && oldCh !== ch ), 两个节点都有子节点,而且它们不一样,这样我们会调用updateChildren函数比较子节点,这是diff的核心.
4、 else if (ch),只有新的节点有子节点,调用createEle(vnode),vnode.el已经引用了老的dom节点,createEle函数会在老dom节点上添加子节点。
5、else if (oldCh),新节点没有子节点,老节点有子节点,直接删除老节点。

diff核心

1、首先新旧头、尾两两比较(new_s:old_s,new_s:old_e,new_e:old_s,new_e:old_e)共四种。
处理了这些场景之后,一方面一些不需要做移动的DOM得到快速处理,另一方面待处理节点变少,缩小了后续操作的处理范围,性能也得到提升
2、如果过程1中,不满足节点相等,又分两种情况:

  • 结点设置了key
    设key后,会从用key生成的对象oldKeyToIdx中查找匹配的节点,所以为节点设置key可以更高效的利用dom。这也就是v-for中要设置key的原因
  • 没有设置key
    直接创建新节点,删除旧节点。不能复用

下面举个例子,画出diff完整的过程,每一步dom的变化都用不同颜色的线标出。


参考资料:解析vue2.0的diff算法
深入Vue2.x的虚拟DOM diff原理

四、Vuex

1、什么是vuex

vuex是用来管理各个组件的共享数据的,它可以看做是一个仓库,仓库里包含了State、Actions和Mutations,当其中一个组件更改了State中的共享数据时,也会反映在其他组件中。

使用场景:开发大型单页面应用,各个组件之间有很多共享数据。否则可以使用总线。


在vue-cli构建的项目中使用方式
1、新建store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)//使用插件的写法
export default new Vuex.Store({//创建一个仓库,仓库里有State、actions和mutations
    state: {
    city: '上海'//共享数据
    } ,
    actions: {
        changeCity(ctx, city){
         ctx.commit('Xiugaicity', city)//通过commit触发mutations修改数据,‘xiugaicity’是自定义的触发事件
         }
        },
    mutations: {
        xiugaicity(state, city){
            state.city = city
        }
    }
})

2、在main.js中引入,在vue实例中添加store

import store from './store/index.js'
var vm=new Vue({
  el: '#app',
  // router必须有,否则app中的使用router-view会报错
  router,
  store,
  // 这里的App是从import App from './App'这里倒入的变量,可以更改
  components: { App },
  template: '<App/>'
})

3、在组件中使用,在需要修改城市的地方调用dipatch,触发actions中的行为

this.$store.dispatch('changeCity',city)//'changeCity'自定义事件,与actions中的事件一致

如果只有同步操作,修改state中的数据的时候,可以不dispatch惊动actions,只需要this.$store.commit('xiugaicity',city),越过actions直接commit触发mutations更改数据。

4、优化代码

//对于state中的属性每次通过this.$store.state.city来获取太麻烦,
//借助mapState,将state中的属性映射为组件的this.city属性,对于mutations等,
//同样有mapMutations ,将this.$store.commit('xiugaicity',city)映射为this.xiugaicity方法
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符可以和组件中的其他计算属性并存
  ...mapState({
   city:city
  })
}

五、Vue组件通信

1、通过Prop向子组件传递数据

父组件在子组件实例中,通过定义一个属性:a=“message”,希望子组件接受这个信息,子组件通过props来接收这个属性。

<body>
  <div id="app">//cnt是要传递的信息的包装属性,count代表的值才是真正的信息
      <button-counter :cnt="count"></button-counter>
  </div>

</body>
<script>
  Vue.component('button-counter',{
    data:function(){
      return{
        count:this.cnt
      }
    },
    props:['cnt'],//接收cnt属性,不要直接改变父组件传递过来的cnt,需要复制一下,否则会报错
    template:`<button @click="count++">Click{{count}}</button>`
  })
  new Vue({
    el:'#app',
    data:{
      count:0
    }
  })
</script>

props书写方式:
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object }
props特性,对应的属性值不会在dom中显示,非props特性会在dom结构中显示,子组件使用非props传过来的值,会报错,不使用则不会报错。

2、通过事件向父级组件发送消息

子组件通过$emit('event',value)向父级组件抛出事件且传值,父级组件通过@event="函数名或者js表达式"来执行。
1、父组件通过js表达式接受

<body>
  <div id="app">
      <button-counter @addcount="count+=$event"></button-counter>
      <div>count:{{count}}</div>
  </div>

</body>
<script>
  Vue.component('button-counter',{
    data:function(){
      return{
      }
    },
    template:`<button @click="$emit('addcount',1)">Click add count</button>`
  })
  new Vue({
    el:'#app',
    data:{
      count:0
    }
  })
</script>

2、在methods中处理

<body>
  <div id="app">
      <button-counter @addcount="addcount"></button-counter>
      <div>count:{{count}}</div>
  </div>

</body>
<script>
  Vue.component('button-counter',{
    data:function(){
      return{
      }
    },
    template:`<button @click="add">Click add count</button>`,
    methods:{
      add(){
        this.$emit('addcount',1)
      }
    }
  })
  new Vue({
    el:'#app',
    data:{
      count:0
    },
    methods:{
      addcount(val){
        this.count+=val
      }
    }
  })
</script>

3、使用bus总线,组件之间传值

<body>
  <div id="app">
      <button-counter :name='bob'></button-counter>
      <button-counter  :name='ali'></button-counter>
  </div>
</body>
<script>
  Vue.prototype.bus=new Vue()//使用bus总线,bus本身就是vue实例
  Vue.component('button-counter',{
    data:function(){
      return{
        n:this.name
      }
    },
    props:['name'],
    template:`<button @click="change">name:{{this.n}}</button>`,
    methods:{
      change(){
        this.bus.$emit('addcount',this.n)
      }
    },
    mounted(){//在各个组件mounted中监听组件传值
      var this_=this
      this.bus.$on('addcount',function(n){
        this_.n=n
      })
    }
  })
  new Vue({
    el:'#app',
    data:{
      bob:'bob',
      ali:'dfd'
    }
  })
</script>

4、使用vuex来管理组件的共享数据。

MVC|MVP|MVVM

1、MVC

视图(View):用户界面
控制器(Controller):业务逻辑
模型(Model):数据保存
通信方式


1、View 传送指令到 Controller
2、Controller 完成业务逻辑后,要求 Model 改变状态
3、 Model 将新的数据发送到 View,用户得到反馈

2、MVP

MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。


1.各部分之间的通信,都是双向的。

  1. View 与 Model 不发生联系,都通过 Presenter 传递。
  2. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。
3、MVVM

MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。



唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容