Vue

VUE-CLI

1.创建项目

// 1.需要先删除旧版本cli
npm uninstall vue-cli -g
// 2.安装@vue/cli
npm install @vue/cli -g
// 3.查看vue版本
vue --version
// 4.创建vue项目
vue create ym001 
参考链接 https://www.jianshu.com/p/7cccc5b38dcc
参考链接 https://www.cnblogs.com/coober/p/10875647.html

2. 性能优化

https://www.yuque.com/fe9/basic/locx8c#728b4ded

Vue

注意事项:

vue组件样式添加了scoped 最外层的元素会被父组件样式穿透

// index.vue
<template>
  <div class="container">
    <page-header />
    <div class='content'>我的背景是红色的</div>
  </div>
</template>
<script>
  import PageHeader from '@/components/setting/page-header'
  export default {
    components: { PageHeader }
  }
</script>
<style lang="scss" scoped>
  .container{
    position: fixed;
    height: 100%;
    width: 100%;
    .content {
       background: red;
    }
  }
</style>
// page-header.vue
<template>
  <div class="content">
        我的背景也是红色的
  </div>
</template>
...script ...style:scoped

Object.defineproperty / proxy

1. 两者最大的区别在于proxy能监听对象的所有属性，

2. defineproperty只能监听对象的某一个属性 ```javascript // Object.defineProperty// 不兼容IE8 var obj = {}; // obj.name = 666 // Object.defineProperty(obj,’name’,{ // value:666, // enumerable:false,// 是否可枚举， 是否能够循环的到 默认false // // writable:false, // 是否可以更改 默认不可改写 // // configurable:false // 是都可删除 delete 默认不可删除 // }); var t=666; Object.defineProperty(obj,’name’,{ // 数据劫持 get(){ //当name被调用的时候 会触发 这个 get；调用时 获取到的值 是 这个函数的返回值 console.log(‘get’) return t }, set(val){ // 当name属性被赋值的时候 会触发 这个set val对应的就是给name赋予的哪个值 console.log(‘set’,val) t = val; } });

   // Proxy var obj2 = { name:123, age:456, sex:7777, a:{ qqq:123 } } var tempObj2 = new Proxy(obj2,{ get(target,key){ // target就是 obj2 // key 就是我们调用的对应的属性的名字 console.log(‘get’,arguments) return target[key] }, set(target,key,val){ console.log(‘set’) target[key] = val } }); // Proxy 优势 不用挨个属性进行劫持

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

<a name="XqSar"></a>
### 自定义指令 directive
<a name="dMgp3"></a>
### mvvm v-model 原理
```javascript
 class myVue {
    constructor(options) {
      this.$el = document.querySelector(options.el)
      this.$data = options.data
      this.observe(this.$data) // 负责数据劫持
      this.nodeToFragment(this.$el, this)// 负责模板编译
    }
    observe(data) {
      // 把data中的属性进行劫持
      if (({}).toString.call(data).match(/ (\w+)]/)[1] != 'Object') return
      let keys = Object.keys(data)// 获取到了每一个属性名
      keys.forEach(key => {
        this.defineReactive(data, key, data[key])
      })
    }
    defineReactive(obj, key, value) {
      // 负责使用 defineProperty进行数据劫持
      this.observe(value)// 递归劫持
      let dep = new Dep()
      Object.defineProperty(obj, key, {
        get() {
          console.log('get')
          if (Dep.target) {
            dep.addSub(Dep.target)
          }
          return value
        },
        set(newVal) {
          console.log('set')
          if (value !== newVal) {
            value = newVal
            dep.notify()
          }
        }
      })
    }
    nodeToFragment(el, vm) {
      // 把节点转到 fragment上
      let fragment = document.createDocumentFragment()
      let child
      while (child = el.firstChild) {
        fragment.appendChild(child)
        this.compile(child, vm)
      }
      el.appendChild(fragment)
    }
    compile(node, vm) {
      // 编译 node中的  vue语法
      // 先判断 node的节点类型 看他是一个 元素节点 还是 文本节点
      if (node.nodeType == 1) {
        // 元素节点 // 要获取行内属性的
        let attrs = node.attributes;
        [...attrs].forEach(item => {
          // 查看当前的属性名是不是  v-xxx的
          if (/^v-/.test(item.name)) {
            // 证明这个属性 是 v-model 我i们要获取 后边的name这个字符
            let vName = item.nodeValue // name
            let val = vm.$data[vName]// 珠峰
            new Watcher(node, vName, vm)
            node.value = val// 把珠峰这两字 放到 input框中
            node.addEventListener('input', (e) => {
              vm.$data[vName] = e.target.value
            })
          }
        });
        // 处理当前元素的子元素
        [...node.childNodes].forEach(item => {
          this.compile(item, vm)
        })
      } else {
        // 文本节点
        let str = node.textContent// 获取文本字符串
        // console.log(str)//  {{name}}
        if (/\{\{(\w+)\}\}/.test(str)) {
          console.log(str)
          str = str.replace(/\{\{(\w+)\}\}/, (a, b) => {
            new Watcher(node, b, vm)
            return vm.$data[b]
          })
          node.textContent = str
        }
      }
    }
  }
  //订阅器
  class Dep {
    constructor() {
      this.subs = []
    }
    addSub(sub) {
      this.subs.push(sub)
    }
    notify() {
      this.subs.forEach(sub => {
        // debugger
        // 让对应的事件执行  sub 就是哪些 watcher
        sub.update()
      })
    }
  }
  // 订阅者
  class Watcher {
    constructor(node, key, vm) {
      Dep.target = this
      this.node = node
      this.key = key
      this.vm = vm
      this.getValue()
      Dep.target = null
    }
    update() {
      this.getValue()
      // debugger
      if (this.node.nodeType == 1) {
        // 就是input框
        this.node.value = this.value
      } else {
        this.node.textContent = this.value
      }
    }
    getValue() {
      // 获取新值
      this.value = this.vm.$data[this.key]
    }
  }

vue.use

1. 传入实参会默认执行某些方法， 会根据实参的类型进行不同操作

2. 判断传入实参是否有install方法，并调用，若install方法不存在

3. 再判断实参是不是一个函数，若是执行实参函数，若不是将不在往下执行

$nextTick原理

1. nextTick内部有一个callbacks事件池, 还有一个pedding的状态
2. 预先会进行浏览器能力检测, promies > setImmediate > MessageChannel > setTimeout
3. 当用户调用nextTick方法, 往callbacks push箭头函数
4. 若传入cb, cb.call执行,否则走promies微任务执行
5. 判断pedding为false 改变状态调用timeFun方案挨个执行事件池方法
6. 执行完状态改为false

provide/inject使用.父组件定义provide 子组件使用inject定义 泼歪德 in杰可特
https://juejin.im/post/5dc4cbeff265da4d1f51c7f1

$emit(父组件事件名,参数) 父组件使用@事件名= 方法 驼峰命名

动态组件
上述内容可以通过 Vue 的 元素加一个特殊的 is attribute 来实现：
动态更换组件
props
数组传,对象传,prop验证
https://cn.vuejs.org/v2/guide/components-props.html
禁用 Attribute 继承
inheritAttrs: false, 默认true
$listeners
.sync
https://www.jianshu.com/p/6b062af8cf01
插槽
组件里面必须有 可搭配component :is使用
插槽作用域 如果插槽中要使用data的数据
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
具名插槽 可以在插槽上定义v-slot=”mySlot”
注意 v-slot 只能添加在