2022/3/21-2022/3/22

2022/3/21
今天在写代码的时候遇到了一个bug，就是当我打开表格弹窗，第一次可以修改数据，重新打开再也修改不了数据，
不知道问题出在哪里，于是就在Object.assign后面加上了 this.subform = JSON.parse(JSON.stringify(this.subform));就可以了
大概就是：

  getsubArg().then(response => {
          //修改以秒为单位的时间值，把ms改成s
            response.data.maxDiffTime = response.data.maxDiffTime/1000;
             response.data.minDiffTime = response.data.minDiffTime/1000;
             Object.assign(this.subform,response.data);
             this.subform = JSON.parse(JSON.stringify(this.subform));
             console.log(this.subform,'response.data')
            this.loading=false;
          }).catch(err => {
             this.msgError(err);
          });

问题描述：element的el-form表单数据绑定或者回显后无法编辑修改

因为切换菜单的时候页面并不会刷新，列表也不会更新，因此要用activated钩子函数。

**activated()** {
     this.loading=true;
     this.getList();
     console.log('触发')
  },

vue2:
在main.js中，通过vue.prototype.xx = …
之后就可以this.xx直接使用该方法or属性。
举例，在main.js中，有：

Vue.prototype.msgInfo = function(msg) {
  this.$message.info(msg);
};

那么以后在不同js文件都可以通过this.msgInfo来使用该方法了。
vue.prototype.xx就是一个注册，它能注册到vue上。（终于知道注册啥意思了）因为一整个软件就是vue应用，
this就指代vue了。

2022/3/22
如果对象有一个属性，它是computed，那么它的类型是number。
在typescript中，可以对对象进行类型检查。

比如

interface DataProps {
      count:number;
      double:number;
      increase:()=>void;
}
export default {
     setup(){
         const data:DataProps= reactive({
           count:0,
           increase:()=>{data.count++}
           double:computed(()=>data.count*2)
        })
    }
}

(在return中，return {…data} ,那么在ui界面就可以直接通过count,increase获取数据，而不是data.count,data.increase
这个对象也是vue3的compositionapi特点。(但是仅以…data返回是不可以的，因为里面的数据并不具备响应式）
所以是： const refData = toRefs(data) return {…refData} （注意，toRefs来自于
import { toRefs } from ‘vue’）

reactive的使用：
从

const count = ref(0)
const double = computed(()=>return count.value*2)
const increase = ()=>{ count.value++}

变成data
注意：reactive属性单独被拎出来就失去了响应性，就比如函数里有对象.属性，函数等于reactive,
失去函数，对象.属性不在管制范围内，即不在函数作用域内，就没有函数作用。
reactive相当于一个响应式函数，离开这个函数就不具备响应式了。
从data
变成refData
最后返回 …refData

好像知道vue2为什么双向绑定原理是object.defineProperty了，准备来说是它加上 发布者订阅模式。
单从object.defineProperty来讲，它并没有实现双向绑定，但是它能监听对象属性的变化，然后改成最新值。并且能监听获取跟设置段，并作为信息显示。
然后双向绑定就是拿这些信息显示，根据发布者订阅模式通知vue发生数据变化。
这才是vue2双向绑定原理：Object.defineProperty加观察者模式。

vue3用的是new Proxy，和Object.defineProperty不同的是它是直接监听对象的属性，这样就是实时
监听到更改数据时的变化了。当变化对象属性时就会触发set。

watch监听属性：第一个参数接收的是需要观察发生变化的变量，第二个参数是一个回调函数。
举例：

watch([greeting,data],(newValue,oldValue)=>{
        console.log('old',oldValue)
        console.log('new',newValue)
}

现在打印的old,new的值都是数组，[greeting,data]
监听多个变量用数组概括，监听一个变量就直接watch(greeting,(old,new)=>{})

关于监听reactive对象的属性：（对象属性缺乏响应式）解决方案：
注意，watch需要监听响应式数据，或者函数类型，array,object，所以如果数据非响应式数据，
比如data.count(reactive(data))，它不是响应式数据。
那么就将data.count用箭头函数包裹一下就行，这样就能监听了
即watch(()=>data.count,(newValue,oldValue)=>{}