vue的扩展

vue生命周期与钩子函数

生命周期：一个事物从创建到销毁的整个过程就叫生命周期

vue生命周期：一个vue从创建到最终销毁的整个过程。

(1) 为什么要学习vue的生命周期

• vue是一个框架，内部的很多逻辑都已经处理好了，学习vue的生命周期有利于了解vue如何工作。
• 学习了vue的生命周期，才能参与到vue的生命周期中。（什么时候发请求）

https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

vue2响应式原理与缺点

Object.defineProperty

数据发生了改变，vue会自动更新dom  

//vue2.0使用了es5中的语法，Object.definePropertty语法（数据劫持）
数据劫持   三个对象（对象，属性，对象的描述）
Object.defineProperty(data,'name'{
get(){
comsole.log('当获取name属性的时候，会执行get')
return name
},
set(){
console.log('当设置name属性的时候就会执行set')
name=value
}
})

// ES5的Object.defineProperty语法有缺点
// 1. 性能较差，只能一个属性一个属性劫持
 // 2. 只能对属性一个一个的劫持，那么对象新增的属性就无法生效
 // 3. Object.defineProperty语法 无法劫持数组的下标和长度

缺点与$set

vue3响应式原理介绍

//vue3  采用了es6  proxy代理     VUE3 不兼容ie   vue3对ie11出一个特殊的版本

var data={
name:'zs',
age:18,
gender:'nam'
}
//newData   是data的代理对象
//proxy代理的整个对象
const newData=new Proxy(data,{
get(target,k){
console.log('代理了target的${k}属性')
return target[k]

},
ste(target,k,v){
console.log('代理了target的 ${k}属性的设置为${v}')
target[k]=v

}
})


//不用担心新增的属性，不用担心数组的下标和长度的问题

proxy的使用

mixins的使用

就是混入    用于复用的一些功能
单独新建一个mixins文件夹,hello.js文件
export default {
  // 混入的对象可以包含组件任意的配置
  created() {
    console.log('哈哈哈')
    this.say()
  },
  destroyed() {
    console.log('byebye')
  },
  methods: {
    say() {
      console.log('我说')
    }
  },
  data() {
    return {
      message: '你好啊'
    }
  }
}

别的组件就可以调用
引入：
import   hello  from '@/mixins/hello'
export default{
//vue官网是这样写的
var  Component=vue.extend({
mixins:[hello]
})
//extend看到对于没看   可以省略，就像下面这样写就可以直接写对象
mixins:[hello]//就是混入了hello组件
}

注：//
在混入的外面的钩子函数与引入的不会冲突可以共存都能起效
//但如果是函数里面的数据冲突了   组件自己的数据优先级高

watch深度监听

如果要监听复杂类型的数据变化
//就需要深度监听  ,就是watch的完整写
   const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        car: {
          brand: '小黄车',
          price: 199
        }
      },
      watch:{
      msg(value){
      console.log('msg发生了改变',value)
      }
        // 如果需要监听复杂数据类型，需要使用功能深度监听
        // 需要使用watch的完整写法
        car:{
        //监听需要执行的函数
        handler(value){
         console.log('car变化了', value)
        
        },
        // 深度监听，处理监听地址的变化，还会监听对象内部属性的变化
        deep:true,
        //立即监听
        immediate: true
         }
       }
      })
      
    /* 
      监听简单类型
        watch: {
          msg() {},   msg:{ handler(){} }
        }
      监听复杂类型
        watch: {
          msg: {
            handler(value) {},
            deep: true,
            immediate: true
          }
        }

        
    */   
    

计算属性的get与set

 // 1. 默认情况下，计算属性的值只能获取，不能修改。计算属性是只读的
      // 2. 计算属性只有依赖到的属性发生了改变，计算属性才会自动跟着变
      // 3. 计算属性也有完整写法

   computed: {
        fullName: {
          // 计算属性默认的
          get() {
            return this.firstName + ' ' + this.lastName
          },
          set (value) {
            // this.firstName = value.split(' ')[0]
            // this.lastName = value.split(' ')[1]
            [this.firstName, this.lastName] = value.split(' ')
          }
        }
      }

//set   设置   就可以实现双向的设置

props的类型校验

props: []

props: {}

 // 通用组件的时候，，，组件库
      Vue.component('demo', {
        template: `<div>我是demo组件---我的钱{{money + 100}}</div>`,
        props: {
          money: {
            type: Number,
            // required: true,
            default: 0
          }
        }
      })
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello',
          money: 200,
          money2: 100
        }
      })
 //props  也有对象的用法  也是经常用的
 //type   可以设置其类型

promise

// promise 承诺
      // 作用：用于书写异步代码的新方式
      // es6以前，没有promise使用回调函数，，，，嵌套 回调低于

      // var p = axios()
      // p.then().catch()
      // async function fn() {
      //   try {
      //     const res = await p
      //   } catch {}
      // }
      // react
      // promise的面试题
      // 1.promise的静态方法
      // new Promise() 创建一个promise对象
      new Promise(function(reslove, reject) {
        // 异步代码
        // 成功调用resolve
        // 失败调用reject
      })

      // Promise.resolve(5) 返回一个只会成功的promise
      // new Promise(function (resolve, reject) {
      //   resolve(5)
      // })
      // Promise.resolve(5).then(data => {
      //   console.log(data)
      // })
      // 返回直接失败的promise
      // Promise.reject(10)
      // new Promise(function(resolve, reject) {
      //   reject(10)
      // })
      // Promise.reject(10).catch(err => {
      //   console.log(err)
      // })

      // Promise.all([p1, p2, p3])
      // 参数接受多个promise对象， 返回一个promise对象
      // 只有所有的promise对象都成功，返回的promise才成功，只要有一个失败，返回的promise就失败
      // Promise.all([axios(), axios(), axios()]).then().catch()

      // 竞速
      // 缓存策略
      Promise.race([p1, p2, p3])
      // 返回一个promise对象，，，，这个promise对象的结果只会取决于第一个结束的promise