vue实际工作用到的知识点

最新推荐文章于 2025-02-12 17:35:51 发布

weixin_33712881

最新推荐文章于 2025-02-12 17:35:51 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5aa8d410f265da23a40483a3

本文介绍了Vue.js开发中的一些实用技巧，包括属性变化检测、条件判断优化、组件间交互、对象与数组监测方法及组件失去焦点事件处理。通过这些技巧，帮助开发者提高应用性能和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.检测某个对象的属性变化

watch:{
    'obj.name':function(){
        //进行检测操作
    }
}
复制代码

2.根据属性判断

在vue中利用属性值进行某些条件的判断时,一定要注意先判断此属性是否存在,否则会导致异常抛错。

3.slot条件判断问题

在开发时,利用 v-if进行条件判断 , v-if 和 v-else 条件中各有一个默认的slot标签,依此加载外部传入的内容和根据条件加载slot外部包裹的内容。这种写法在development 环境下可以正常显示v-else中内容,但是在编译后发布到正式环境时,v-else中内容会显示为空白。解决方法是调整模板内容,根据条件判断某些样式和标签。此处记录一下,以后避免此种写法。(但是仍不知道具体原因,无从查起...)

4.Vue对于对象和数组的监测

① 由于js属性限制,Vue无法检测到对象属性的添加或删除,在数组中直接改变数组的长度值会改变数组,但是不会引起Vue响应,解决办法是利用Vue.$set()方法。 ② Vue的数组方法push、splice、reverse等和原生Array 的方法其实并不相同,而是进行了重新封装,仅仅对Vue内部的数组有效。一个框架的编写,不应过多的影响全局,也可以防止外部数据更新影响到Vue实例内部数据。

const methods = ['push', 'pop', 'shift'];
 const arrayAugmentations = [];
 methods.forEach(method => {
   let arrFun = Array.prototype[method];
   arrayAugmentations[method] = function() {
     console.log("改变了");
     return arrFun.apply(this, arguments);
   }
 });

 let list = [1, 23, 4];
 // 将要监听的数组的原型指针指向上面定义的空数组对象
 list.__proto__ = arrayAugmentations;
 list.push(99)
复制代码

5.Vue组件失去焦点事件

原理就是判断当前点击的元素是否属于当前组件 (参考链接)

created() {
   
   // 点击其他不在的区域触发事件
   document.addEventListener('click', (e) => {
       console.log(this.$el.contains(e.target));
       if (!this.$el.contains(e.target)) {
       //组件外点击事件
       }
   });
}
复制代码

转载于:https://juejin.im/post/5aa8d410f265da23a40483a3