总结vue知识体系之实用技巧

vue 作为目前前端三大框架之一，对于前端开发者可以说是必备技能。那么怎么系统地学习和掌握 vue 呢?为此，我做了简单的知识体系体系总结，不足之处请各位大佬多多包涵和指正，如果喜欢的可以点个小赞!本文主要讲述一些vue开发中的实用技巧。

创新互联公司是一家集网站建设,会昌企业网站建设,会昌品牌网站建设,网站定制,会昌网站建设报价,网络营销,网络优化,会昌网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

监听组件的生命周期

比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，常规的写法可能如下：

 
 
 
 
    
  
  
  
  
  1.  // Parent.vue 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. // Child.vue 
    5. 
  
  
  
  
  5. mounted() { 
    6. 
  
  
  
  
  6.   this.$emit("mounted"); 
    7. 
  
  
  
  
  7. } 
    8.

此外，还有一种特别简单的方式，子组件不需要任何处理，只需要在父组件引用的时候通过@hook 来监听即可，代码如下：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3.

当然这里不仅仅是可以监听 mounted，其它的生命周期事件，例如：created，updated 等都可以。

watch 的初始立即执行

观察和响应 Vue 实例上的数据变动。类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作。

但是当 watch 一个变量的时候，初始化时并不会执行，如下面的例子，你需要在 created 的时候手动调用一次。

 
 
 
 
    
  
  
  
  
  1. created() { 
    2. 
  
  
  
  
  2.   this.getList(); 
    3. 
  
  
  
  
  3. }, 
    4. 
  
  
  
  
  4. watch: { 
    5. 
  
  
  
  
  5.   keyWord: 'getList', 
    6. 
  
  
  
  
  6. } 
    7.

上面这样的做法可以使用，但很麻烦，我们可以添加 immediate 属性，这样初始化的时候就会自动触发(不用再写 created 去调用了)，然后上面的代码就能简化为：

 
 
 
 
    
  
  
  
  
  1. watch: { 
    2. 
  
  
  
  
  2.   keyWord: { 
    3. 
  
  
  
  
  3.     handler: 'getList', 
    4. 
  
  
  
  
  4.     immediate: true 
    5. 
  
  
  
  
  5.   } 
    6. 
  
  
  
  
  6. } 
    7.

watch 有三个参数：

  • handler：其值是一个回调函数。即监听到变化时应该执行的函数
  • deep：其值是 true 或 false;确认是否深入监听。
  • immediate：其值是 true 或 false，确认是否以当前的初始值执行 handler 的函数

路由参数变化组件不更新

同一path的页面跳转时路由参数变化，但是组件没有对应的更新。

原因：主要是因为获取参数写在了created或者mounted路由钩子函数中，路由参数变化的时候，这个生命周期不会重新执行。

解决方案1：watch监听路由

 
 
 
 
    
  
  
  
  
  1. watch: { 
    2. 
  
  
  
  
  2.  // 方法1 //监听路由是否变化 
    3. 
  
  
  
  
  3.   '$route' (to, from) { 
    4. 
  
  
  
  
  4.    if(to.query.id !== from.query.id){ 
    5. 
  
  
  
  
  5.             this.id = to.query.id; 
    6. 
  
  
  
  
  6.             this.init();//重新加载数据 
    7. 
  
  
  
  
  7.         } 
    8. 
  
  
  
  
  8.   } 
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10. //方法 2  设置路径变化时的处理函数 
    11. 
  
  
  
  
  11. watch: { 
    12. 
  
  
  
  
  12. '$route': { 
    13. 
  
  
  
  
  13.     handler: 'init', 
    14. 
  
  
  
  
  14.     immediate: true 
    15. 
  
  
  
  
  15.   } 
    16. 
  
  
  
  
  16. } 
    17.

解决方案2 ：为了实现这样的效果可以给router-view添加一个不同的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件。

 
 
 
 
    
  
  
  
  
  1.  
    2.

路由懒加载

Vue 项目中实现路由按需加载(路由懒加载)的 3 中方式：

 
 
 
 
    
  
  
  
  
  1. // 1、Vue异步组件技术： 
    2. 
  
  
  
  
  2.  { 
    3. 
  
  
  
  
  3.     path: '/home', 
    4. 
  
  
  
  
  4.     name: 'Home', 
    5. 
  
  
  
  
  5.     component: resolve => reqire(['path路径'], resolve) 
    6. 
  
  
  
  
  6.   } 
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8. // 2、es6提案的import() 
    9. 
  
  
  
  
  9.   const Home = () => import('path路径') 
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11. // 3、webpack提供的require.ensure() 
    12. 
  
  
  
  
  12.   { 
    13. 
  
  
  
  
  13.      path: '/home', 
    14. 
  
  
  
  
  14.      name: 'Home', 
    15. 
  
  
  
  
  15.      component: r => require.ensure([],() =>  r(require('path路径')), 'demo') 
    16. 
  
  
  
  
  16.     } 
    17.

require.context()

require.context(directory,useSubdirectories,regExp)

  • directory：说明需要检索的目录
  • useSubdirectories：是否检索子目录
  • regExp：匹配文件的正则表达式,一般是文件名

场景:如页面需要导入多个组件,原始写法：

 
 
 
 
    
  
  
  
  
  1. import titleCom from '@/components/home/titleCom' 
    2. 
  
  
  
  
  2. import bannerCom from '@/components/home/bannerCom' 
    3. 
  
  
  
  
  3. import cellCom from '@/components/home/cellCom' 
    4. 
  
  
  
  
  4. components: { 
    5. 
  
  
  
  
  5.   titleCom, bannerCom, cellCom 
    6. 
  
  
  
  
  6. } 
    7.

这样就写了大量重复的代码,利用 require.context 可以写成

 
 
 
 
    
  
  
  
  
  1. const path = require('path') 
    2. 
  
  
  
  
  2. const files = require.context('@/components/home', false, /\.vue$/) 
    3. 
  
  
  
  
  3. const modules = {} 
    4. 
  
  
  
  
  4. files.keys().forEach(key => { 
    5. 
  
  
  
  
  5.   const name = path.basename(key, '.vue') 
    6. 
  
  
  
  
  6.   modules[name] = files(key).default || files(key) 
    7. 
  
  
  
  
  7. }) 
    8. 
  
  
  
  
  8. components: modules 
    9.

递归组件

递归组件: 组件在它的模板内可以递归的调用自己，只要给组件设置 name 组件就可以了。

不过需要注意的是，必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded

组件递归用来开发一些具体有未知层级关系的独立组件。比如：联级选择器和树形控件

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3.

清除定时器或者事件监听

由于项目中有些页面难免会碰到需要定时器或者事件监听。但是在离开当前页面的时候，定时器如果不及时合理地清除，会造成业务逻辑混乱甚至应用卡死的情况，这个时就需要清除定时器事件监听，即在页面卸载(关闭)的生命周期函数里，清除定时器。

 
 
 
 
    
  
  
  
  
  1. methods:{ 
    2. 
  
  
  
  
  2.   resizeFun () { 
    3. 
  
  
  
  
  3.     this.tableHeight = window.innerHeight - document.getElementById('table').offsetTop - 128 
    4. 
  
  
  
  
  4.   }, 
    5. 
  
  
  
  
  5.   setTimer() { 
    6. 
  
  
  
  
  6.     this.timer = setInterval(() => { }) 
    7. 
  
  
  
  
  7.   }, 
    8. 
  
  
  
  
  8.   clearTimer() {//清除定时器 
    9. 
  
  
  
  
  9.         clearInterval(this.timer) 
    10. 
  
  
  
  
  10.     this.timer = null 
    11. 
  
  
  
  
  11.     } 
    12. 
  
  
  
  
  12. }, 
    13. 
  
  
  
  
  13. mounted() { 
    14. 
  
  
  
  
  14.   this.setTimer() 
    15. 
  
  
  
  
  15.   window.addEventListener('resize', this.resizeFun) 
    16. 
  
  
  
  
  16. }, 
    17. 
  
  
  
  
  17. beforeDestroy() { 
    18. 
  
  
  
  
  18.   window.removeEventListener('resize', this.resizeFun) 
    19. 
  
  
  
  
  19.   this.clearTimer() 
    20. 
  
  
  
  
  20. } 
    21.

自定义路径别名

我们也可以在基础配置文件中添加自己的路径别名

 
 
 
 
    
  
  
  
  
  1. resolve: { 
    2. 
  
  
  
  
  2.     extensions: ['.js', '.vue', '.json'], 
    3. 
  
  
  
  
  3.     alias: { 
    4. 
  
  
  
  
  4.       'vue$': 'vue/dist/vue.esm.js', 
    5. 
  
  
  
  
  5.       '@': resolve('src'), 
    6. 
  
  
  
  
  6.       'assets': resolve('src/assets') 
    7. 
  
  
  
  
  7.     } 
    8. 
  
  
  
  
  8.   } 
    9.

然后我们导入组件的时候就可以这样写：

 
 
 
 
    
  
  
  
  
  1. // import YourComponent from '/src/assets/YourComponent' 
    2. 
  
  
  
  
  2. import YourComponent from 'assets/YourComponent' 
    3.

这样既解决了路径过长的麻烦，又解决了相对路径的烦恼。

动态给修改dom的样式

原因：因为我们在写.vue文件中的样式都会追加scoped。这样针对模板dom中的样式就可以生效，但其生效后的最终样式并不是我们写的样式名，而是编码后的。比如：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   .box { 
    4. 
  
  
  
  
  4.     background: red; 
    5. 
  
  
  
  
  5.   } 
    6. 
  
  
  
  
  6.  
    7.

vue 将代码转译成如下，所以我们在js中拼接上的dom结构样式并不会生效。

 
 
 
 
    
  
  
  
  
  1. .box[data-v-11c6864c]{ background:red; } 
    2. 
  
  
  
  
  2.  
    3.

 

解决方法：将要改变的样式写在非scoped样式标签中。

长列表性能优化

我们应该都知道 vue 会通过 object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间。

所以，我们可以通过 object.freeze 方法来冻结一个对象，这个对象一旦被冻结，vue就不会对数据进行劫持了。

 
 
 
 
    
  
  
  
  
  1. export default { 
    2. 
  
  
  
  
  2.   data: () => ({ 
    3. 
  
  
  
  
  3.     list: [] 
    4. 
  
  
  
  
  4.   }), 
    5. 
  
  
  
  
  5.   async created() { 
    6. 
  
  
  
  
  6.     const list = await axios.get('xxxx') 
    7. 
  
  
  
  
  7.     this.list = Object.freeze(list) 
    8. 
  
  
  
  
  8.   }, 
    9. 
  
  
  
  
  9.   methods: { 
    10. 
  
  
  
  
  10.     // 此处做的操作都不能改变list的值 
    11. 
  
  
  
  
  11.   } 
    12. 
  
  
  
  
  12. } 
    13.

另外需要说明的是，这里只是冻结了 list 的值，引用不会被冻结，当我们需要 reactive 数据的时候，我们可以重新给 list 赋值。

内容分发(slot)

插槽 slot，也是组件的一块 HTML 模板，这一块模板显示不显示、以及怎样显示由父组件来决定。实际上，一个 slot 最核心的两个问题在这里就点出来了，是显示不显示和怎样显示。

默认插槽

又名单个插槽、匿名插槽，这类插槽没有具体名字，一个组件只能有一个该类插槽。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6.

具名插槽

匿名插槽没有 name 属性，所以叫匿名插槽。那么，插槽加了 name 属性，就变成了具名插槽。具名插槽可以在一个组件中出现 N 次，出现在不同的位置，只需要使用不同的 name 属性区分即可。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6.

作用域插槽

作用域插槽可以是默认插槽，也可以是具名插槽，不一样的地方是，作用域插槽可以为 slot 标签绑定数据，让其父组件可以获取到子组件的数据。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
  
  
  
  
  3.     >> 
    4. 
  
  
  
  
  4.   
 
  •  
  •  
  •  
  •  
  •  

    • 网站标题：总结vue知识体系之实用技巧
    当前网址：http://www.shufengxianlan.com/qtweb/news46/539996.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    做网站知识

    各行业网站

    UI设计　　 　传美奇电器　　 　德阳东方电机技改服务有限公司　　 　深圳惠宜防蚊纱窗　　 　成都网站排名　　 　成都营销型网站建设　　 　成都翻译公司　　 　平城网站运维　　 　遂宁网站建设　　 　大足网站建设　　 　安卓开发　　 　成都网站排名　　 　400电话办理　　 　中晴建设　　 　定制网站　　 　成都网站维护　　 　复盛机电设备安装　　 　成都广告招牌　　 　成都LED显示屏　　 　成都微信小程序开发