关于 VUE + Element-UI 的一些新手工作经验

VUE

1.单双引号

当使用 vue 动态绑定时 里边的内容要用单引号 否则会编译错误

  如: v-if="msg == 'abcdef'"

       @click = "event('abcdefg')"

2.v-if 与 v-show

	手段	编译过程	编译条件	性能消耗	使用场景
v-if	动态的向DOM树内添加或者删除DOM元素	v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件	惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);	更高的切换消耗	适合运营条件不大可能改变
v-show	通过设置DOM元素的display样式属性控制显隐	v-show只是简单的基于css切换	v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；	更高的初始渲染消耗	适合频繁切换

 

3.Promise.All

  将所需后台接口名 填充到 Promise 数组里 可按顺序执行

    let obj = [];

    for(let i = 0;i < 3;i++){

        obj.push(addPersonAxiosInterface1("王小明","19","男"));
        obj.push(addPersonAxiosInterface2("王二明","29","男"));
        obj.push(addPersonAxiosInterface3("王久明","39","男"));

    }

    Promise.all(obj).then((res)=>{console.log(res);})

    //顺序执行addPersonAxiosInterface1,addPersonAxiosInterface2,addPersonAxiosInterface3

4.生命周期

  父子组件的执行生命周期顺序

---

4.1.挂载阶段

   该过程主要涉及 beforeCreate、created、beforeMount、mounted 4 个钩子函数。执行顺序为：

 父beforeCreate -> 父created -> 父beforeMount ->

 子beforeCreate -> 子created -> 子beforeMount -> 子mounted ->

 父mounted

    一定得等子组件挂载完毕后，父组件才能挂在完毕，所以父组件的 mounted 在最后。

---

 4.2.更新阶段

    该过程主要涉及 beforeUpdate、updated 2 个钩子函数。注意，当父子组件有数据传递时，才有这个更新阶段执行顺序的比较。执行顺序为：

    父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

---

4.3.销毁阶段

    该过程主要涉及beforeDestroy、destroyed 2 个钩子函数。执行顺序为：

    父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

---

4.4.总结

    Vue 父子组件生命周期钩子的执行顺序遵循：从外到内，再从内到外。

---

4.5常用生命周期钩子

1.beforeCreate：实例创建前执行。

        el 和 data 都为 undefined，还未初始化。methods、computed 以及 watch 上的数据或方法均不能被访问。

2.created：实例初始化完成后执行。

        页面还没开始渲染，不可访问 DOM 节点。el 仍然为 undefined。但可以操作 data 与 methods 等。可以做一些初始数据的获取，在当前阶段无法与 DOM 进行交互，如果需要，可以通过 $nextTick 来访问 DOM。

3.beforeMount：挂载前执行。

        el 和 data 都初始化了，虚拟 DOM 已经创建完成，即将开始渲染。

4.mounted：页面渲染完毕时执行。

        真实的 DOM 挂载完成，可访问 DOM 节点。可使用 refs 对 DOM 进行操作。也可以向后台发送请求。

5.beforeUpdate：数据发生更新时执行。

        此时 Vue 实例中的数据是最新的了，但是页面中的数据还是旧的，可以在此时进一步更改数据，而不会造成重新渲染。

6.updated：数据发生更新导致的 DOM 重新渲染完成时执行。

        此时 DOM 已经更新，可以执行 DOM 相关操作。

7.beforeDestroy：实例销毁前执行。

        实例仍然完全可以使用。在此阶段一般进行善后工作，如清除计时器、解除绑定等。

8.destroyed：实例销毁完成。

        实例绑定的所有东西都会被解除，如解除事件监听和对 DOM的数据绑定，所有子实例也统统被销毁，组件被拆解将无法使用。改变 data 也不会再重新渲染，但是 DOM 结构依然存在。

5.监听与计算

computed计算属性：

作用：

1. 解决模板中放入过多的逻辑会让模板过重且难以维护的问题。例如两个数据的拼接或字体颜色的判断。
2. 它支持缓存，只有依赖的数据发生了变化，才会重新计算。例如模板中多次用到数据拼接可以用计算属性，只执行一次计算，除非数据发生变化。
3. 不支持异步，如果有异步操作，无法监听数据的变化。
4. 如果属性值是函数，默认使用get方法，函数的返回值就是属性的属性值。还有一个set方法，当数据变化时就会调用set方法。
5. computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。

---

watch侦听器：

作用：

1. 它不支持缓存，数据变化时，它就会触发相应的操作。
2. 支持异步监听。
3. 接受两个参数，第一个是最新的值，第二个是变化之前的值。
4. 监听data或者props传来的数据，发生变化时会触发相应操作。有两个参数：

        immediate：立即触发回调函数。

        deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。

---

总结：

（1）computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。

（2）watch 侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

---

computed与watch的使用场景：

computed：是多对一，多个数据影响一个。当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。

watch：是一对多，一个数据发生变化，执行相应操作会影响多个数据。当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许执行异步操作 ( 访问一个 API )，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

6.跨域proxy表

配置 dev.中的 proxy 表的时候不要忘记重新部署项目，因为更改完部署之后要重启才能生效

VUE 下使用 Element-UI

1.自定义组件样式

  <div class="div1">

    <el-input v-model="personalInfo" clearable />

     <span style="color: #adadad">名字的检索放在这里</span >

  </div>

  由于<el-input>没有property能改变长度，所以我们要给组件内部的类设置一个width属性

  .fatherdiv {

    /deep/ .el-input__inner {

       width：150px

    }

上边的操作是在组件内部的 .el-input__inner 外层包裹一个父级div 并赋给他一个独特的类名

，之后使用/deep/打到组件内部的这个类设置width长度

同时，这是防止全局污染的一个很好的方法

补充:不仅是element-ui!任何一款组件都可以使用/deep/改变原生的css样式

 

    /deep/ .uni-scroll-view-refresh__spinner > circle{

      color:#0081ff !important;

    }

    /deep/.uni-scroll-view-refresh-inner> svg{

      fill:#0081ff !important;

    }

 

[官网文档]: https://element.eleme.cn/#/zh-CN/component/installation "组件"

2.使用el-table遇到的问题:

vue组件中如果存在多张表:

  原则上每张表里都需要加一个唯一的key属性，同时加一个ref属性，

  否则编译渲染时 只会作用在第一张表上

为什么有时候写了show-summary 但合计列无法计算:

  el-column中没有prop属性，会导致合计列无法计算

合计列在水平滚动条的下边，而我想让滚动条在整体表格的下面

    /deep/ .{{outsideDivClassName}} .el-table {

    overflow: auto;

    }

    /deep/.{{outsideDivClassName}}  .el-table__body-wrapper,

    /deep/.{{outsideDivClassName}}  .el-table__header-wrapper,

    /deep/.{{outsideDivClassName}}  .el-table__footer-wrapper {

    overflow: visible;

    }

    /deep/ .{{outsideDivClassName}}  .el-table::after {

    position: relative !important;

    }

    <!-- ({{outsideDivClassName}}是外部的父div选择器名) -->

 

在使用el-table 的"fixed"属性 为表格固定左右两列的话:

  如果发现滑动的时候文字重叠 修改一下颜色就可以了**rbga 出现 (x,y,z,0.5) 时 会设置成透明**

  导致文字重叠 其他类似问题 也可以从调色下手

 注意: "row-class-name" 不能和 "strip" 属性同时用

在el-table中过滤数据 不需要大动干戈的修改数据,直接在组件里这样写就行:

 

  <div class="div1">

    <el-table :data="tableData.filter((v) => v.action != 'delete')" />

  </div>

使用el-select

确保绑定的v-model和:value的值类型需要保持一致,v-model(String) <==> value(String)