vue3开发过程中遇到的疑问及技术点

目录

一、vue2为什么只能有一个根节点，而vue3可以是多根节点

二、vue3中的context

三、ref与reactive的区别

四、reactive与shallowReactive的区别

五、vue3中为什么新增了setup？

六、vue3使用proxy的优点

七、在H5中涉及到的技术点 

---

一、vue2为什么只能有一个根节点，而vue3可以是多根节点

1.vue2为什么只能有一个根节点
因为vdom是一个单根树形结构描述当前视图结构，patch方法在遍历的时候从根节点开始遍历，它要求只有一个根节点。组件也是会转换成vdom，所以也必须满足单根节点要求

2.vue3为什么可以多根节点
因为vue3引入了fragment概念，这是一个抽象的节点，如果发现组件是多根的会自动创建一个fragment节点，把多根节点视为自己的children。在patch时，如果发现这是一个fragment节点，则直接遍历children创建或更新。

二、vue3中的context

context是一个普通的javascript对象，也就是说，他不是响应式的，可以安全的对context使用es6解构。

三、ref与reactive的区别

• ref()和reactive()这两种方式都是对响应式数据的声明。

• reactive定义复杂的数据类型的数据，ref推荐定义基本数据类型。

• ref定义的数据打印结果需要.value才能获取到结果，reactive不需要。

• 使用ref定义基本数据类型，ref也可以定义数组和对象。但是使用reactive去定义基本数据类型的时候控制台会报出警告的信息。

什么时候使用ref，什么时候使用reactive？

• 只打算修改引用类型的属性的时候使用reactive，想要修改变量重新赋值的时候一定要用ref。
• 如果是重新赋值的话用reactive，在onMounted里面不是检测不到变化，不能在onMounted里面用reactive或者ref去赋值，但是可以直接counter.name=’lisi’去赋值

带ref的响应式变量

a. 在3.0中，可以通过一个新的ref函数使任何响应式变量在任何地方起作用。

b. ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值。

c. 将值封装在一个对象中，看似没有必要，但为了保持 JavaScript 中不同数据类型的行为统一，这是必须的。这是因为在 JavaScript 中，Number 或 String 等基本类型是通过值而非引用传递的。ref是为我们的值创建了一个响应式应用。

四、reactive与shallowReactive的区别

• 如果数据是服务器返回的LIST数据，而且只显示、不变更，那么最好是使用shallowRef来包装数据，可以节能。如果会有变更，那么应该用ref

• shallow的中文意义是“浅层的”，shallowReactive不代理深层property，只会指向原始对象的深层property。

• shallowReactive的用途是：如果一个对象的深层不可能变化，那么就没必要深层响应，这时候用shallowReactive可以节省系统开销。(印证第一点)

五、vue3中为什么新增了setup？

可以把业务相关的代码放在同一个位置来写。将同一个逻辑关注点相关代码收集在一起会更好的阅读和维护。组合优于继承！

六、vue3使用proxy的优点

1. 使用proxy不污染源对象，会返回一个新对象，defineProperty是注入型的，会破坏源对象。

2. 使用proxy只需要监听整个源对象的属性，不需要循环使用Object.definedProperty监听对象的属性。

3. 使用proxy可以获取到对象属性的更多参数，使用definedProperty只能获取到监听属性的新值newValue。

七、在H5中涉及到的技术点 

1. 从路径获取参数

   if (route.query.authOrgId) {
     data.authOrgId = route.query.authOrgId; //企业/联盟/政府id
   }

2. 调用安卓方法且同时兼容本地调试

    try {
         androidinfo.closePage();
      } catch (error) {
         router.back()
    }

3. 路由传参 （此处有坑：使用param传参，本地调试可以，上了服务器不支持）

   router.push({
         name: "YuanGongManage",
         query: {
           orgId: data.organizationId,
         },
    });

4. 切换头像（注意三元表达式判断方法时要带括号）

   <van-cell title="联盟logo" center @click="changeLogo('picsButton1')>
                           <template #right-icon>
                               <span id="picsButton1">
                                   <img v-if="data.logo" :src="data.logo" class="logo-icon" alt="">
                                   <img v-else class="logo-icon" src="@/assets/imgs/allianceLogoMR.png" alt="" />
                               </span>
                               <van-icon name="arrow" />
                           </template>
    </van-cell>

   /**
        * 文件上传接口
        */
       const upload = (file, callback) => {
           let formData = new FormData();
           formData.append("file", file);
           singleUpload(formData).then((res) => {
               if (res.status == 200) {
                   if (callback) {
                       callback(res);
                   }
               } else {
                   showToast(res.msg);
               }
           });
       };
       //logo修改
       const changeLogo = (picsButton) => {
           let PICDom = document.getElementById(picsButton);
           let inputDom = null
           if (!document.getElementById("inputDomId")) {
               let inputDom1 = document.createElement("input");
               inputDom1.setAttribute("type", "file");
               inputDom1.setAttribute("id", "inputDomId");
               inputDom1.setAttribute("accept", "image/*");
               inputDom1.style.cssText =
                   "display:none;position: absolute;top: 0;bottom: 0;width: 48px;height: 48px;z-index: 10;";
               PICDom.appendChild(inputDom1);
               inputDom = document.getElementById("inputDomId")
           } else {
               inputDom = document.getElementById("inputDomId")
           }
           inputDom.click();
           try {
               androidinfo.setFileMaxCount(1);
               androidinfo.setIsImageCrop(true);
           } catch (error) {
   
           }
           setTimeout(() => {
               inputDom.onchange = function () {
                   let file = inputDom.files[0];
                   if (file.length == 0) {
                       return false;
                   }
                   if (file) {
                       upload(file, (res) => {
                           let url = res.data;
                           //赋值  data.logo = url;
                           
                       });
                   }
               };
           }, 10);
       }