# Vue-s

**Repository Path**: zhangBo11/vue-s

## Basic Information

- **Project Name**: Vue-s
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-18
- **Last Updated**: 2024-04-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue2源码学习

## README

##### new Vue()底层逻辑
- new Vue()
- init ---initData
- $mount --- template->  complie()->  parse(tempalate)->  generate(ast)==>render function
- render function() ---getter--dep collect watcher ==>new Watcher() ==>patch()=>vnode+updateChildren==>dom
- setter ==>dep.notify()=>watcher.update() =>[].push(watcher)=>nextTick() =>watcher.run() ==>更新

##### initData
- 1.new Vue 会调用_init方法进行初始化操作
- 2.会将用户的选项放到 vm.$options上
- 3.会对当前属性上搜素有没有data 数据   initState
- 4.有data 判断data是不是一个函数 ，如果是函数取返回值 initData
- 5.observe 去观测data中的数据 和 vm没关系，说明data已经变成了响应式
- 6.vm上像取值也能取到data中的数据 vm._data = data 这样用户能取到data了  vm._data
- 7.用户觉得有点麻烦 vm.xxx => vm._data
- 8.如果更新对象不存在的属性，会导致视图不更新， 如果是数组更新索引和长度不会触发更新
- 9.如果是替换成一个新对象，新对象会被进行劫持，如果是数组存放新内容 push unshift() 新增的内容也会被劫持，通过__ob__ 进行标识这个对象被监控过  （在vue中被监控的对象身上都有一个__ob__ 这个属性）
- 10如果你就想改索引 可以使用$set方法 内部就是splice()
##### Watcher Dep
- 只有根组件的情况：  每个属性都有一个dep
- 1.vue里面用到了观察者模式，默认组件渲染的时候 ， 会创建一个watcher，（并且会渲染视图）
- 2.当渲染视图的时候，会取data中的数据， 会走每个属性的get方法， 就让这个属性的dep记录watcher
- 3.同时让watcher也记住dep （这个逻辑目前没用到）   dep和watcher是多对多的关系，因为一个属性可能对应多个视图，一个视图对应多个数据
- 4.如果数据发生变化，会通知对应属性的dep，依次通知存放的watcher去更新
##### Minix,nextTick等实现

#### diff算法

个人总结：
```
1.对数据进行响应式时，添加dep属性
2.template => ast语法树 =>new Function+with生成_c,_v,_s的render函数 =>render函数执行生成虚拟dom+真实数据=>生成真实dom
在页面初始化时，在上面render函数生成虚拟dom+真实数据时会触发数据的get方法，get方法中就会把视图用到的数据添加一个闭包dep变量，
此时数据更改data.xx=xxx，就会触发属性的set方法，set方法会调用更新，此时页面更新，
上面添加dep只针对了对象的属性，如果data下的数组或者对象本身发生变化也学要能触发，所以也要加dep属性
```


- Vue组件  
- 全局组件，局部组件
- 既有全局又有局部，先看自己有吗，没有去全局，类似原型链查找
- Vue.components和Vue.extends的区别，component第二个参数如果是对象会判断类型，在调用Vue.extends
- 实现Vue.components
- 实例初始化时，先把参数中存在的全局组件和局部组件挂载，然后在处理组件类型的节点生成，替换组件中的变量