zoukankan      html  css  js  c++  java
  • vue基础

           一、vue vue $mount 和 el的区别

    两者在使用效果上没有任何区别,都是为了将实例化后的vue挂载到指定的dom元素中。

    如果在实例化vue的时候指定el,则该vue将会渲染在此el对应的dom中,反之,若没有指定el,则vue实例会处于一种“未挂载”的状态,此时可以通过$mount来手动执行挂载。

    注:如果$mount没有提供参数,模板将被渲染为文档之外的的元素,并且你必须使用原生DOM API把它插入文档中;

    二、vue 子组件不可修改props中的值

    三、vue 安卓4.4及以下 打不开的坑(白屏)

         首先 npm install babel-polyfill
        然后在webpack.base.conf.js中修改入口
        entry: {
                 app: [‘babel-polyfill’, ‘./src/main.js’]//最新的入口
                // app: ‘./src/main.js’//原来的入口
        },
        重新npm run dev 就可以啦!!!,安卓4.4重新打开,主要原因是使用了es6的语法,低版本安卓需先将其转化为es5的语法

        或者在html最前端加入

        <script type="text/javascript">
          if(!window.Promise){
            var promiseScript = document.createElement('script');
            promiseScript.type = 'text/javascript';
            promiseScript.src = 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js';
            document.head.appendChild(promiseScript);
          }
        </script>
    

     四、vue-router切换的时候,会先加载新的组件,当新的组件渲染好但是还没mount的时候,销毁旧组件,然后再挂载新组件,也就是说当B页面的生命周期进行到beforeMount的时候,下一步走到的就是A页面的beforeDestory方法和接下去的destroyed方法

    五、vue-cli3

         脚手架的使用https://www.cnblogs.com/XCWebLTE/p/9546756.html

          config多环境配置https://blog.csdn.net/qq_35167373/article/details/80671346

    六、vue的生命周期:

        1、单个组件的生命周期;

        2、父子组件的生命周期;

        3、路由跳转的生命周期。

    七、vue性能优化

       https://juejin.im/post/5d548b83f265da03ab42471d    

    八、vue核心问题

       https://juejin.im/post/5d41eec26fb9a06ae439d29f 

    九、数组更新检测

      官方文档指出

    由于 JavaScript 的限制,Vue 不能检测以下数组的变动:
    
    当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
    当你修改数组的长度时,例如:vm.items.length = newLength

     首先在生命周期第一次渲染时是可以更新的,再setTimeout或者方法中单独修改这两项不可以响应视图,但是如果在修改这两项的同时修改了其他可以触发视图响应的属性(如修改字符串的值),则可以顺带响应该变化

    十、性能优化

         1、图片类:1⃣️图片懒加载 vue-lazyload;2⃣️判断浏览器支持webp则使用webp格式,webp格式的图片更小;3⃣️、对图片进行裁剪 https://help.aliyun.com/document_detail/44688.html?spm=a2c4g.11186623.6.1370.213735a8NTxRNa

         2、tab切,为防止切换频率太高,tab切时将之前的请求断掉。使用axios的canceltoken

         3、按需加载组件,异步组件,动态组件,异步组件在打包时打包到不同的文件中,只有在用到的时候才请求过来

    十一、postcss-px2rem-exclude

           可以用exclude过滤不需要转化的样式

  • 相关阅读:
    一波骚操作,我把 SQL 执行效率提高了 10,000,000 倍!
    如何优雅地根治null值引起的Bug!
    解锁新姿势:探讨复杂的 if-else 语句“优雅处理”的思路
    39 个奇葩代码注释,看完笑哭了。。。
    只要学会它,再多 Bug 也不怕
    SpringBoot 快速整合Mybatis(去XML化+注解进阶)
    Java 并发异步编程,原来十个接口的活现在只需要一个接口就搞定!
    微服务 2.0 技术栈选型手册
    如何设计 API 接口,实现统一格式返回?
    别在 Java 代码里乱打日志了,这才是打印日志的正确姿势!
  • 原文地址:https://www.cnblogs.com/sunala/p/10270853.html
Copyright © 2011-2022 走看看