vue这个阶段属实学的有点久，没办法毕竟是拿来找工作的家伙，趁着今天休息，来一个总结，回顾一下之前学过的小点，因为最近也是一直在写项目（移动端/PC端/管理系统?），所以以前的东西忘得差不多了，一下子总结的话就太多了所以可能分几段去总结吧。

简单说一下目前我对Vue的理解

在以往的学习中，js操作dom的方式实在繁琐，而且页面多了之后就会发现同样的布局要写很多次，类似这样的问题在以前数不胜数，所以前端工程化的趋势就越来越明显，而Vue就能够解决这些繁琐的事情，能够响应式的更新页面数据，并且对同样的布局样式可以进行组件化操作，需要用的时候导入即可。

双向数据绑定，使用起来最爽的地方，数据变页面就会变化，完全不需要再考虑dom的操作，这样我们就可以只关心怎么操作数据，开发效率又一个质的飞跃，同时为了避免频繁操作Dom损耗性能，vue内部使用的是虚拟DOM，通过diff算法做一个新旧dom的对比，判断哪些是需要变化更新的，只需要更新那些DOM就可以了，这样就减少了很多不必要的 DOM 操作，大大提升了性能，至于怎么实现的目前还未研究，可能我也研究不懂吧，现在要求自己会用就行。

指令

指令有很多，其实就是Vue内部定义的一些属性，均以v-开头，用来完成一些指定的任务，比如v-text/html类似js语法中的innertext/html向页面插入内容。

• v-model : 能够实现表单的value值的双向数据绑定，可以使用修饰符比如.lazy(等输入完成后才改变值)，.trim(去除首尾空行)等，语法糖: 其实v-model等价于提供了:value属性以及@input事件。
• v-on : 为当前元素绑定事件，简写是@，它也有修饰符，.stop可以阻止冒泡，.prevent可以阻止默认事件，.enter配合键盘事件可以是按下回车触发。
• v-bind : 可以动态绑定html的属性值，简写是:，使用对象用法可以动态控制值的显示，用在class上很实用。
• v-for : 使当前标签循环渲染，key值必须填写，并且建议有id使用id值，index索引可能会导致渲染错误，这是因为diff算法会根据key值去对比，加上key能够提高渲染效率。
• v-if/else-if/else : 通过布尔值控制标签是否显示，和v-show的唯一区别就是v-show的显示方式是display控制，而v-if会直接删除内容再创建全新的，通常if用在组件重启非常实用。
• v-cloak : 配合css能够在渲染完毕之前做一些样式处理。
• v-once : 只取一次值，后续值修改的时候不会再渲染到页面上 (非常累赘个人感觉)
• v-pre : 保持原样输出，和pre标签类似。

计算属性 computed

前面所学的指令操作的数据都是在data方法里的数据，而计算属性则是自己定义了一个computed对象，内部写的就是方法，但是有点特殊，他不能当方法使用，而是当属性使用，所以函数必须写返回值。

特点: 计算属性只要计算了一次，就会把结果缓存起来，以后多次使用计算属性，直接使用缓存的结果，不会多次调用函数。

侦听器 watch

可以通过绑定属性名监听到该属性的变化，从而触发内部的函数。

watch: {
  // 参数1： value    变化后的值
  // 参数2： oldValue 变化前的值
  msg (value, oldValue) {
    console.log('你变了', value, oldValue)
  }
}

这种简写的形式默认监听栈的变化，如果想监听堆的变化需要改变deep的值，默认是false，同时完整写法也有一定变化，需要写的是对象。

watch: {
  friend: {
    // handler 数据发生变化，需要执行的处理程序
    // deep: true 开启深度监听，默认为false
    // immediate: 立即触发一次该监听函数
    handler (value) {
      console.log('你变了', value)
    },
    deep: true,
    immediate: true
  }
},

过滤器 filters

filters: {
    // 这里的formatTime就是过滤器名字
    // 这里的val就是原数据
    // return就是新的结果
    formatTime (val) {
        // 做一些处理
        return val
    }
}

注意: 只能在插值语法中使用，可以衔接多个过滤器，不过一般一个过滤器就能够搞定，多个过滤器纯属多余，而且过滤器里的this指向的是window，不是当前vue实例，所以换句话说 过滤器里无法访问当前vue实例里的数据。

全新的开发方式 | vue-cli介绍

传统的开发模式就是html,css,js配合vue.js使用。

全新的开发方式：即工程化开发方式，在webpack环境中开发vue，非常的方便，并且能够通过组件化，模块化的方式去简化和管理代码，非常的适合多人协作开发。

学过webpack就知道那些配置有多繁琐，而vue-cli（俗称vue脚手架）就出现了，vue全家桶的一员，可以说是零配置开箱即用，非常方便。

通过 npm install -g @vue/cli 全局安装，即可使用vue create的命令创建一个vue项目了。

组件

一个.vue文件就是一个组件，组件解决了页面中很多相同布局样式的重复编写，通过调用组件就能实现页面布局，页面互相使用就需要导入并注册，注册完成后直接当标签使用即可。

局部注册

import HmHeader from './components/HmHeader'
import HmContent from './components/HmContent'
import HmFooter from './components/HmFooter'

export default {
  // data methods filters computed watch
  components: {
    // 组件名: 组件
    // 组件名：注意，不能和html内置的标签重名
    // 使用的时候：直接通过组件名去使用
    // HmHeader  HmHeader  hm-header
    HmHeader,
    HmContent,
    HmFooter
  }
}

全局注册

如果一个小组件多个组件中都需要使用，建议在main.js中全局注册方便，注册完成直接当标签使用即可。

import HmHeader from './components/HmHeader'
import HmContent from './components/HmContent'
import HmFooter from './components/HmFooter'

// 全局注册
// Vue.component(名字, 组件)
Vue.component('HmHeader', HmHeader)
Vue.component('HmContent', HmContent)
Vue.component('HmFooter', HmFooter)

组件样式冲突解决 scoped

我们都知道css是不向js一样有作用域的说法，但可以通过在style标签上设置一个scoped属性去解决。

<style lang="less" scoped>
div {
  background-color: pink;
}
</style>

其中的原理就是添加了一个自定义属性，然后该组件内部的css都会加上这个自定义属性，言外之意就是有这个自定义属性的才能被选中，只有该页面有，其他组件没有，一般建议每个组件都加上，互不影响比较利于排查。

组件通信之父子传值

首先要知道组件之间是不会相互影响的，这样也很合理，因为如果能够影响就有命名空间的问题了，但是有很多情况下是需要组件之间能够相互访问数据的，比如购物车的总价和每一个单元格组件，如果不能知道单元格中的个数和单价，总价的组件就没法求。

组件通信的方式有很多，最原始的就是父子传值了，但是这种非常的麻烦，于是就有另一个方案/插件出现了，那就是vuex，这也是vue全家桶的一员，这个后续我会另行总结，因为也是一个大章节，非常尴尬的是pinia貌似会取代vuex，所以我们也得学了(ˉ﹃ˉ)。

父传子

父组件通过绑定属性的形式传给子组件。

<Son price="100" title="不错" :info="msg"></Son>

子组件通过props接收，接收后直接当data中的数据使用即可，但需要注意的是接收过来的值是只读的（vue遵循单向数据流的原则，其实也只是针对栈中的数据只读而已），不能直接修改父组件中的数据，这时候就需要通过子传父传值了。

props: ['price', 'title', 'info']

这种接收方式也只是简写，如果需要更多配置可以写完整写法，如下:

props:{
    num:{
        type:可以限制传入数据的数据类型 Number,String,Function,Array,Object,undefined,null,
            [Number,String]
        validator:(value)=>{   // 对传入的值进一步验证
            return boolean
                true:通过验证
                false:不通过验证
        },
        required:是否必传
        default:不传入时的默认值
            基本数据类型：直接定义默认值
            复杂数据类型：()=>{return 默认值}
      }
  }

子传父

子组件可以通过 this.$emit('事件名', 参数1, 参数2, ...) 触发事件的同时传参，而父组件需要给子组件注册一个自定义事件用来接收并触发。

<my-product 
  ...
  @sayPrice="sayPrice">
</my-product>

最后

虽然说是学完了，但后续的总结还是在下次自习的时候再复习总结吧，Vue的内容太多了，培训也终于到了后半段了，就业老师也加入了班级，最近一直在敲项目，慢慢的我竟然感觉有点累了，再坚持坚持吧~