html引入cdn出错时

const Vue =window.Vue

文件名小写，组件名大写

文件名防止电脑系统不识别大小写，组件名防止和原生标签冲突

data数据响应式过程

es6 geter setter(不加括号的函数)

let obj2={
  姓:"高",
  名:"圆圆",
  get 姓名(){
    return this.姓+ this.名
  }
}

console.log(obj.姓名) //高圆圆

• 对象外面后面还想添加get set时

Obj.defineProperty （虚拟属性）

var _age=0
Obj.definePropertty(obj2,'age',{
  get(){
    return this._age
  },
  set(value){
    return this._age=value
  }
})

代理proxy

let myData={n:0}

let data = proxy({data:myData})

function proxy(x){
  const {data} = x //const data = x.data
  
  let value =data.n
  delate data //用完即删 防止更改!
  Object.defineProperty(data,'n',{
    get(){
      return value
    },
    set(newValue){
      if(newValue<0)return 
      value =newValue
    }
  }) //监听data
  
  const obj={}
  Object.defineProperty(obj,'n',{
    get(){
      return data.n
    },
    set(value){
      if(value<0)return
      data.n=value
    }
  })
  
  return obj // obj就是代理
}

data中没有写数据 想要新增

Vue.set和this.$set

• 作用

1. 新增key
2. 自动创建代理和监听（如果没有创建过）
3. 触发UI更新（但不会马上更新）

• 举例

// 这是的this是vm代理的（data）
this.$set(this.object,'m',100)

数组变异方法(自动帮你set)

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

class VueArray extends Array{
  push(..args){
    const oldLength =this.length //this当前数组
    super.push(...args)
    for(let i=oldLength;i<this.length;i++){
      Vue.set(this,i,this[i])
    }
  }
}

computed

• 计算用的属性
• 根据传入的变量的变化 进行结果的更新
• 变量不在 data中定义，而是定义在computed中，写法跟写方法一样，有返回值。函数名直接在页面模板中渲染，不加小括号
• 基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次 计算缓存的数据，因此提高了程序的性能。而methods中每调用一次就会重新计算一次，为了进行不必要的资源消耗，选择用计算属性

watch

• 监听属性，属性变化后执行一个函数
• watch是发生改变的时候才会触发
• 简单类型看值，复杂类型（对象）看地址
• 当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch

语法

语法1
watch:{
  o1:()=>{}, //箭头函数别用，this指向全局对象
  o2:funtion(value,oldValue){}, //n的变化后和变化前的值
  o3(){},
  o4:[f1,f2] //先执行f1再执行f2，
  o5:'methodName', //method里的方法
  o6:{handlder:fn,deep:true,immediate:true},
  'object.a':function(){} //对象里的属性
}

语法2
vm.$watch('xxx',fn,{deep:..,immediate:..})

deep：true

• 监听到对象里层，只要里面数据变了就监听到
• 例子：object.a变了，object就变
• false则反

immediate:true

• 第一次渲染时就监听