vue2 开发总结

1、v-if 和 v-show 在 组件中 的差异：https://zhuanlan.zhihu.com/p/513061819

• 控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除；
• 编译过程：v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换（组件内的事件和子组件都不会销毁和重建）。
  • v-if 切换：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染。
  • v-show 切换：v-show 由false变为true的时候 不会触发组件的生命周期.
• 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
• 使用场景：v-if适合运行时条件不大可能改变；v-show适合频繁切换。

　　总结：开发时，首先想到使用的应该是 v-show，而不是v-if。只有在 v-show 不方便时 才考虑使用 v-if。

2、vue-cli中文件路径使用别名：https://blog.csdn.net/qq_29018891/article/details/90381333

• html中：@
• css中：~@ ，并且不要写成字符串
• js中：@

3、单页应用路由跳转后scrollTop 不是0：https://blog.csdn.net/wang1006008051/article/details/81366355?utm_source=blogxgwz3

• 解决方案1：没有页面，手动设置 

  window.scrollTop(0,0)

• 解决方案2：vue-router路由提供的 接口 设置。

  const router = new VueRouter({
    routes: [...],
    scrollBehavior (to, from, savedPosition) {
      // return 期望滚动到哪个的位置
      return { x: 0, y: 0 }
    }
  })

4、vue 中使用scoped关键字后样式不能修改第三方组件问题：

　　原因 ： https://www.jb51.net/article/143272.htm

　　解决方案： https://www.cnblogs.com/goloving/p/9119265.html  或 https://www.cnblogs.com/tongjiaojiao/p/11511964.html（推荐）

　　　推荐解决方案：

.gHeader ::v-deep .name{ //第一种写法
    color:red;
  }

　　注意【亲测bug】：vue-cli3中使用 /deep/ 在选择器的最后面  就会失效。后面发现 有个 ::v-deep，使用这个就有效了。如下，无效

.gHeader /deep/ {   //vue-cli3中， /deep/ 在选择器最后面，就会失效。但是不报错
    .name{
        color:red;
    }
}

原因分析： style标签中添加了scopde 属性后，vue-loader编译vue文件时：

　　编译 template 时会给每一个标签加上相同的自定义属性 data-* ；

　　编译 style 会给每一个选择器（整体的一个）的后面加上这个属性 elm[data-*]  ；

　　但是第三方组件中的标签是不会添加 这个自定义属性 data-* 的，所以编译后的这个选择器 elm[data-*]，在第三方的组件中找不到这样的标签。

上面推荐解决方案的原理：

　　就是把选择器后面的属性去掉，放到第一基本选择器上。如下面这样

.gHeader[data-*] .name

5、vue组件的is特性  ：  https://www.cnblogs.com/x123811/p/8329289.html

• is属性在  component 组件时：作为 动态组件 进行使用。
• is属性在  常规 HTML 元素时：这些 元素将被视为组件，这意味着所有的 attribute 都会作为 DOM attribute 被绑定。
  说明：（个人理解）常规元素 使用 is 属性，vue编译时就会把他当 component 组件使用。is属性的值就是对应真实的组件。

  <ul>
    <li is="my-component"></li>
  </ul>

6、组件状态的缓存【keep-alive】：   https://cn.vuejs.org/v2/api/#keep-alive

　　使用说明：组件在销毁后，再次加载组件，都会初始化组件。如果需要  下次进入组件 重新加载组件，还是之前的状态。就可以使用keep-alive

7、在计算属性中return函数：https://juejin.cn/post/6998396827766620190 

　　vue官网出来没有介绍这种用法。是看到 ant-design-vue 中的表格组件中有这种用法，不知道意义何在。ant-design-vue中用法如下：

<template>
  <a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
    <a slot="name" slot-scope="text">{{ text }}</a>
  </a-table>
</template>
<script>

export default {
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
};
</script>

                  

总结：这样写的函数，和放在method中是一样的。虽然可以这样用，但是感觉没什么意义。不知道为什么 ant-design-vue 要这样用。
　　    性能上没有什么差异，唯一的好处，感觉就是把两个函数绑定在一个对象上，便于程序员阅读。【这里做个笔记，知道可以这样用就可以了】

8、vue页面有很多组件时，子组件调用接口放在哪个地方： https://www.bilibili.com/video/BV15741177Eh?p=59&spm_id_from=pageDriver&vd_source=d7f39468b08e8d550c58eec9f51525f2 

• 子组件 获取数据：获取数据时，这个请求一般是放在最外层的组件发送上请求,通过 props 传进去。
• 子组件 提交数据：提交数据时，直接在当前 子组件 提交就可以了。【提交数据接口，一般需要手动触发，发生顺序上是比较后的】

9、 vue-router 为什么需要放到 new Vue({router}) options 里：https://zhuanlan.zhihu.com/p/85548765 

• vue-router插件通过 vue.use 注册时，通过全局混入添加一些组件选项，这里主要混入了 beforeCreate 生命周期函数。
• vue-router的路由是需要实例化的，且使用router时是需要启动的。
• 插件函数不能直接外面的变量，只有Vue, options两个参数。所以插件函数要拿到具体的路由实例，只能配置在 new Vue() 的选项中。
• vue-router插件混入的 beforeCreate 函数，就是设置好了启用 new Vue() 选项中配置的router实例。

　　总结：这里的关键是通过Vue插件，混入选项配置，在Vue初始时 启动router实例。VueX的逻辑也是一样的道理。
　　　　　从这点可以看出，只要是需要vue实例化后，再启动（init）的插件 都是需要 再 new Vue() 时，再配置下的。