Vue整理内容

内置指令

• v-text 指令：会替换掉节点中的内容

• v-html 指令：会替换掉节点中所有的内容

  • 可以识别html结构

  • 有安全性问题，容易导致 XSS 攻击

• v-cloak 指令：Vue实例创建完毕并接管容器后，会删掉v-cloak属性，css属性选择器配合v-cloak

• v-once 指令：所在节点在初次动态渲染后，就视为静态内容了

• v-pre 指令：跳过v-pre所在节点的编译过程

  • 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

• 自定义指令：directives

  • bind(element, binding) 指令与元素成功绑定时调用

  • inserted(element, binding)指令所在元素被插入页面时调用

  • update(element, binding) 指令所在模板结构被重新解析时调用

  • element就是DOM元素，binding就是要绑定的对象，它包含以下属性：name value oldValue expression arg modifiers

  Vue.directive(指令名, 配置对象)
  或
  Vue.directive(指令名, 回调函数)
  ​
  ​
  Vue.directive('fbind', {
      // 指令与元素成功绑定时（一上来）
      bind(element, binding) {    // element就是DOM元素，binding就是要绑定的
        element.value = binding.value
      },
      // 指令所在元素被插入页面时
      inserted(element, binding) {
        element.focus()
      },
      // 指令所在的模板被重新解析时
      update(element, binding) {
        element.value = binding.value
      }
  })

  • 指令定义时不加v-，但使用时要加v-

  • 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

全局配置

• vue.config对象的属性

• vue.config.productionTip = false（main.js）

全局API

• Vue.component()：注册全局组件

  • component局部

• Vue.directive()：设置指令

• Vue.filter()：过滤器

• Vue.use()：声明使用组件

• Vue.nextTick()：DOM下一次更新后执行

  • 场景：点击文字自动获取光标；获取数据信息，使用移动端滚动过度/左右联动

• Vue.set()/Vue.delete()：对象属性的添加或删除也有响应式效果（直接添加或删除不是响应式的，也可以使用方法）

  • 个人猜想

  • vue2的响应式是使用Object.defineProperty()没有办法监听获取和修改以外的效果

  • 同理也说明vue为什么要重写JS部分方法的原因之一

• directives：自定义指令

配置项

• data：实现数据的响应式

  • 存放数据

• props：接收父级组件的数据（属性或方法）

  • 父子通信

• computed：计算属性，响应式数据，会根据数据的变化重新计算

  • 注意：如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。

• methods：方法

  • 注意：不应该使用箭头函数来定义 method 函数

• watch：监听

  • 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象

  • 注意，不应该使用箭头函数来定义 watcher 函数

    watch:{
        // 简写
        info(newValue,oldValue){
            // newValue 新内容 oldValue旧内容
        },
        // 监视某一层
        'info.a'(newValue,oldValue){
            // newValue 新内容 oldValue旧内容
        },
        // 完整
        friends:{
            handler(newFriends,oldFriends){ //handler固定这么写
                
            },
            deep:true,// 深度监听
            immediate：true, // 立即监听
        }
    }

• provide / inject：祖先组件向其所有子孙后代注入一个依赖

  // 父级组件提供 'foo'
  var Provider = {
    provide: {
      foo: 'bar'
    },
    // ...
  }
  ​
  // 子组件注入 'foo'
  var Child = {
    inject: ['foo'],
    created () {
      console.log(this.foo) // => "bar"
    }
    // ...
  }

• name：路由组件和递归组件必须设置

• functional：是否为函数组件

DOM

• el：选择器

• template：模板

• render：渲染虚拟DOM

组件

• 动态组件：通过import(路径)引入

  • 场景：tab栏切换

• 缓存组件：通过keep-alive标签包裹

• 异步组件：在需要的时候才导入，同样使用import(路径)引入

  • 在恰当的时机引入组件

• 函数组件：无状态，无实例，无生命周期，渲染性能更高，轻量组件，数据通过父组件传递

• 递归组件：组件内部调用自己，实现递归展示

  • 递归组件必须有name属性

• 路由组件：通过路由注册

• 公共组件：任意组件通过Vue.component()注册

生命周期

• beforeCreate：实例初始化之后

• created：实例创建完成后

• beforeMount：挂载开始之前

• mounted：实例被挂载后

• beforeUpdate：在数据发生改变后，DOM 被更新之前被调用

• updated：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用

• beforeDestroy：实例销毁之前调用

• destroyed：实例销毁后调用

• activated：被 keep-alive 缓存的组件激活时调用

• deactivated：被 keep-alive 缓存的组件失活时调用

• errorCaptured：在捕获一个来自后代组件的错误时被调用

  • 三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串

实例属性

• $el：Vue 实例使用的根 DOM 元素

• $parent：父组件实例

• $children：当前实例的直接子组件

• $refs：注册过ref的DOM 元素和组件实例

• $attrs：接收除props接收以外传递的所以属性（class 和 style 除外）

• $listeners：获取父组件传递过来的方法，不包含.native 修饰器

MVVM

M：数据

V：视图

VM：vue的实例对象

• 数据通过VM的实例对象来进行更新、修改操作的，最后渲染视图

响应式

响应式内容：data/props/computed/veux的state和getters

对象的响应式：通过Object.defineProperty()监听+订阅与发布

数组的响应式：重新更新数组的元素方法+订阅与发布

Vuex

• state

• mutations

• actions

• getters

• modules

更多详细信息看vuex单独的文件

路由

• 跳转方式

  • router-link标签

  • this.$reuter.push()/replace() 无痕浏览

• 携带参数

  • params

    • /xxx/:xxx/:xxx 有？是可选

    • {name:"",params:{xxx:'abc',xxx:123}}

  • query

    • /xxx/xxx 在路径后面跟着

    • {path:"",query:{xxx:'abc',xxx:123}}

  • props（在组件内需要使用props接收）

    • props:true 需要映射，所有params参数

    • props:{a:1,b:2}只能映射非params/query参数

    • props:route=>({name:route.params.name,age:route.query.age,xxx:123}) 指定任何方式

  • meta

• 路由重复跳转

  Vue.use(Router)
  //获取原型对象上的push函数
  const originalPush = Router.prototype.push
  //修改原型对象中的push方法
  Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
  }

• 路由守卫

  • router.beforeEach全局前置守卫

    • to: 即将要进入的目标

    • from: 当前导航正要离开的路由

    • next：错误来源

  • router.afterEach 全局后置钩子

    • to: 即将要进入的目标

    • from: 当前导航正要离开的路由 /

  • 路由独享的守卫

    • 你可以直接在路由配置上定义 beforeEnter 守卫

  • 组件内部使用

    beforeRouteEnter(to, from) {
        // 在渲染该组件的对应路由被验证前调用
        // 不能获取组件实例 `this` ！
        // 因为当守卫执行时，组件实例还没被创建！
      },
      beforeRouteUpdate(to, from) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
        // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
      },
      beforeRouteLeave(to, from) {
        // 在导航离开渲染该组件的对应路由时调用
        // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
      },

• history与hash路由的区别

  • 区别

    • history没有#，刷新携带路由，默认404，需要配置返回首页

      • 开发环境：脚手架默认配置好了

        devServer:{
            historyApiFallback:true
        }

      • 生产环境

        • 配置Nginx

          location/{
              try_files $uri $uri /  /index.html;
          }

    • hash：路由携带#，刷新不会携带路径，请求总是根路径，返回首页，没有404

  • 原理

    • history：使用history对象的pushState()和replaceState() H5新增

    • hash：使用location对象的hash

• 路由跳转滚动条回到顶部

  new VueRouter({
      scrollBehavior(to,from,savedPosition){
          return {x:0,y:0}
      }
  })