vue使用总结

时间  2019-11-09
标签 vue 使用 总结 繁體版
原文   原文链接

上干货

从如下几个方面整理：html

  • vue 用法
  • vue-router 用法
  • webpack 打包
  • 遇到的坑

1、Vue 用法

1. 一般写的 .vue 文件，实则是在写 vue 的配置文件，最终将执行 new Vue() 的操做，传入这些配置。

new Vue({
  data(){
    return {
      name:'xx'
    }
  }
})

// 常编写的.vue文件
export default {
  data(){
    return {
      name:'xx'
    }
  }
}

2. 经常使用组件能够在全局注册。

  • 组件代码，TestComp.vue
<template>
    <div>
    test component
  </div>
</template>
<script>
export default {}
</script>
  • 注册组件，Vue.component 注册
// main.js
import Vue from 'vue';
import TestComp from './TestComp.vue'
Vue.component('test-comp',TestComp);
以上 main.js 中也能够经过 Vue.use 注册，其实实质仍是调用 Vue.Component，对应的 use 的须要有一个 install 函数，使用 Vue.use 将触发 install 执行，而后在 install 中执行 Vue.component 操做。 
// my-components.js
import TestComp from './TestComp.vue'
export default {
    install(Vue){
    Vue.component('test-comp',TestComp)
    // 这里还能够有多个注册 vue.component vue.directive, vue.filter 等
  }
}
// main.js
import Vue from 'vue';
import MyComponents from './my-components.js';
Vue.use(MyComponents)

3. 用的比较多的指令，过滤器，mixin，能够在全局配置

/* 一、 注册指令 */
Vue.directive('')

/* 二、注册过滤器 */
Vue.filter('filterName',(val,...args)=>{
  console.log(args); 
  return val;
})
// 过滤器使用 {{ 'abc' | filterName(1,2,3) }}
// value = 'abc' args 为 [1，2，3]

/* 三、全局 mixin (不建议) */
Vue.mixin({
  mounted(){
    console.log('每一个组件中都将执行这里')
  }
})

4. keep-alive 的使用，能够缓存组件，能够经过 exclude 排除不需缓存的组件，include 包含须要缓存的，max 定义最大缓存的组件数。exclude，include 传入一个数组，元素对应组件的 name 属性，max 传入数字。

<keep-alive :incude="['home','list']" :max="3">
  <router-view></router-view>
</keep-alive>

5. 在页面跳转时，新打开的页面滚动条可能缓存了滚动条位置，在中间的位置，进入页面或者在路由钩子的 afterEach 中执行 window.scroll(0,0) 重置到顶部。

6. 非直接父子组件之间的通讯，使用一个空 vue 对象实现通讯。

// Bus.js
import Vue from 'vue'
export const Bus = new Vue()

// a.vue
import Bus from './bus.js'
Bus.$emit('event_add_cart',1)

// b.vue
import Bus from './bus.js'
Bus.$on('event_add_cart',(num)=>{
  this.cartNum += num
})
a.vue 和 b.vue，引用 bus.js ，Bus 为同一个实例，并不会重复建立，bus.js 就至关于一个调度中心，能够无数个组件，都和它创建连接，发布事件，而后 bus 将发布到给每个创建连接的组件。

7. computed 只有在依赖的 data 里面的值改变时，才会改变，优于直接在模板里执行表达式和方法，由于模板中的方法和模板，在每次 Vue 刷新视图时，都将从新执行一遍。

8. data 须要是一个函数返回一个对象，若是直接赋值一个对象时，作不到隔离同一个组件的数据效果，都将公用同一份数据。

9. 在 vue 组件销毁（beforeDestroy）前，清理定时器和 DOM 事件绑定。

10. 在循环中使用 key，提高渲染性能，key 尽可能不用数组下标，有 key 则 diff 算法就比较 key 值，最大程度上使用原组件，而不是销毁原来的组件后重建。

11. v-for 能够和 v-if 同时使用，先循环再判断，因此能够有选择的渲染数组中的元素，而 angular 中是不支持同一个标签上同时存在 for 和 if 指令的。可能 eslint 会提示报错不建议混合使用，eslint 建议使用改变数组源数据的方式来实现，能够在 computed 中使用数组的 filter 过滤掉不想要的数据。

12. 模板中 template 的使用，当几个同级的元素，须要依赖同一个指令时，又不想添加额外的标签将这些元素包裹时，可使用 template，template 将不会渲染。在 template 使用 v-for 时，key 值须要添加在子元素上。

<template>
    <div>
    <template v-for="(item,index) in [1,2,3]">
      <div :key="index">
        {{item}}
      </div>
    </template>
        <template v-if="2>1">
            <div>
        2大于1
      </div>
            <div>
        2>1
      </div>    
        </template>
  </div>
</template>

13. 在 data 初始化时，对象类型的数据类型，若是不给初始化，单独改变值时，页面是不会响应该值的变化的。

<template>
    <div>
    {{info.name}}
    {{info.age}}
    <div v-for="(item,index) in arr"
         :key="index">{{item}}</div>
  </div>
</template>
<script>
 export default {
   data(){
     return {
       info:{ age:1 },
       arr:[],
         }
   },
   mounted(){
     this.info.name = 'xx'; // 并不能触发页面更新
     this.info.age = 2; // 这样子能够触发页面更新
     this.info = {name:'xx'}; // 这样子能够触发页面更新
     
     // 数组同理
     this.arr[0] = 1; // 并不能触发页面更新
     this.arr = [1]; // 这样子能够触发页面更新
   }
 }
</script>
由于 Vue 在初始化时须要对 data 进行使用 defineProperty 进行 set 和 get 的劫持，若是对象中的值为空，那就不会存在相应的 set 和 get，因此二者方式，一个给对象里面设置初值，二个将对象改成一个新对象，而不是直接在上面添加属性和值。

基于以上，还有一个使用技巧，则是，一些表单若是依赖后台返回的一些数据初始化选择列表等，那么能够在赋值前，先在返回的数组中，加上一个属性，例如 isChecked，而后再赋值给 datavue

<template>
    <div>
   <template v-for="(item,index) in checkboxs">
      <input type="checkbox"
             v-model="item.isChecked"
             :key="index">
    </template>
  </div>
</template>
<script>
export default {
    data(){
    return {
      checkboxs:[]
        }
  },
  methods:{
    getData(){
      // 请求过程略 
      let data = [{name:'zs',name:'ls'}] // 原请求返回数据
      this.checkboxs = data.forEach(item=>Object.assign(item,{isChecked:false}))
    }
    }
}
</script>

14. 开发组件时，能够用 slot 占位，内容在使用组件的地方填充，使组件更加灵活。

15. 在开发管理后台时，能够将通用的数据和方法，写在 mixin 里面，而后在页面中注入，如通用表格的页码配置数据，加载中状态值，还有获取上一页，下一页的方法。

16. 在查看大图的场景中，点开大图，安卓物理键返回时，须要关闭大图，而不进行页面的跳转，则是能够在点开大图的时候，pushState 在 history 中添加一个路由，若是页面须要点击关闭的功能，则须要在点关闭按钮时，手动触发 history.go(-1) 一下;

17. 若是在例如一个操做结果页(好比支付完成)，而后又不能手动配置分享内容的时候，又须要分享的是购买的商品时，则能够经过 replaceState 方法改变路由，可是又不会触发页面刷新，再分享时，app或者浏览器则会自动抓取到替换后的地址分享出去了。

18. 父组件能够经过 @hook:created @hook:mounted 等监听到子组件的生命周期。

19. errorCaptured 捕获子孙组件的错误。

20. slot 插槽的使用

  • 匿名插槽
// child.vue
<template>
<header>
  <slot>all header</slot>
  </header>
</template>

// parent.vue
<template>
<child>
  <div>this is custom header</div>
  </child>
</template>
slot 中能够有默认值
  • 具名插槽
// child.vue
<template>
  <header>
    <slot name="left">left</slot>
    <slot name="right">right</slot>
  </header>
</template>

// parent.vue
<template>
  <child>
    <div slot="left">custom left</div>
    <div slot="right">custom right</div>
    <div slot="right">custom right2</div>
  </child>
</template>
具名插槽能够有一个以上一样 name 的填充。注意组件中用 slot + name ，使用时用 slot=name ，这里容易搞混。
  • 带值传递插槽，slot-scope，也就是子组件的值传递给父组件
// child.vue
<template>
  <header>
    <slot :user="userinfo"
    :address="address"></slot>
  </header>
</template>
<script>
export default {
  data() {
    return {
      userinfo: { name: 'haokur' },
      address: { city: 'guangzhou' },
    }
  },
}
</script>

// parent.vue
<template>
  <div>
    <Child>
      <template slot-scope="row">
      {{JSON.stringify(row)}} => {"user":{"name":"haokur"},"address":{"city":"guangzhou"}}
      </template>
    </Child>
  </div>
</template>
  • 带值传递插槽的使用场景，在 element-ui 中使用的较多，当在非父组件中的循环时，而是向子组件传递值，子组件去遍历时，父组件中的插槽没法拿到遍历的当前值，须要子组件在遍历的时候，把值又给附加在 slot 上。
// List.vue
<template>
  <ul class="table">
    <li class="row"
    v-for="(item,index) in dataList"
    :key="index">
      <slot :row="item">
        {{item}}
      </slot>
    </li>
  </ul>
</template>
<script>
export default {
  props: ['dataList'],
}
</script>

/// parent.vue
<template>
  <div>
    <TestList :dataList="[1,2,3,4,5,6]">
      <template slot-scope="scope">
        {{ scope.row * 2 }}
      </template>
    </TestList>
  </div>
</template>
因而就实现了，子组件反向又像父组件传递值

21. v-once 进行渲染优化，v-once 只会初始化一次，以后页面数据发生变化，v-once 内的内容也不会发生变化。

<template>
  <div>
    <span v-once>{{dateNow}}</span>
    <span>{{dateNow}}</span>
  </div>
</template>
<script>
export default {
  data(){
    return {
      dateNow: Date.now()
      }
  },
  mounted(){
    setInterval(() => {
      this.dateNow = Date.now()
    }, 1000)
  }
}
</script>
测试可看到只有没有加 v-once 的时间在变。

22. 关于在 created 仍是在 mounted 生命钩子里发送数据请求。有些说法是放在 created 中会好一些，能够避免多渲染一次？其论据多是数据若是加载得快，那么就不render默认初始值，而是直接拿到获取到的数据，而后render？先给出个人结论，created 和 mounted 中基本无差，二者的渲染次数是一致的。

<script>
export default {
  created(){
    this.name = 'hello';
    setTimeout(() => {
      this.name = 'haokur'
    }, 0)
  },
  mounted(){
    // this.name = 'xiao'
    //setTimeout(() => {
    //  this.name = 'haokur'
    //}, 0)
  }，
  render(h){
    console.log('执行渲染',this.name)
    return h('div',{},this.name)
    }
}
</script>
以上测试可知， 执行渲染 将进行两次，也就是再快的数据返回，也是要进行两次 render 的。由于请求和setTimeout 同样都是异步的，因此它的执行结果是在事件队列中等着的，而 render 是当前执行栈中的同步方法，它是执行在事件队列中的方法以前的。

注释 created，放开mounted ，render 方法则会执行三遍。webpack

可是 created 和 mounted 中直接赋值则是有差异的，由于 render 会发生在 mounted 以前一次。也就是初始化时，created =》render =》 mounted =》(如有更改，再次 render) =》 请求返回 =》 再次 rendergit

因此最佳的处理方式是，同步更改数据的，放 created 中，这样一些初值在第一次渲染就能正确呈现，且比在 mounted 中少执行一遍 render ，异步更改的无所谓。github

23. is 的使用，在一些特定的结构中使用组件，如 ul 下的 li

// UserItem.js
<template>
    <li>this is useritem</li>
</template>

// container.js
<template>
    <ul>
    <li is="user-item"></li>
  </ul>
</template>
<script>
import UserItem from './UserItem.js'
export default {
    components:{
    'user-item':UserItem
  }
}
</script>

24. Vue 双向数据绑定实现

25. Proxy 实现

26. 三大框架对比

27. vue 的 functional 属性

2、Vue-Router 的使用

1. 路由的简单使用

import Vue from 'vue'
import VueRouter from 'vue-router'

import App from './app.vue'
import Home from './home.vue'

Vue.use(VueRouter); // 注册 router-view，router-link 组件

new Vue({
  el:'#app',
  router:new VueRouter({
    routes:[
      path:'/home',
      component:Home
    ]
  }),
  render:h=>h(App)
})
以上仅是简单使用，在实际项目中，能够将 new VueRouter() 路由配置提出去，而后入口页引入。 
// router.config.js
export const RouterConf = new VueRouter({
  mode:'hash', // hash 默认，切换使用 # 模式，#/home; history 没有 # ，须要服务器配合；abstract 暂未知
  routes:[
     path:'/home',
     component:Home
  ]
})
// 以上还能够把 routes 的值数组单独提出去放一个文件

// main.js
import { RouterConf } from './router.config.js'
new Vue({
  router:RouterConf
})

2. 路由守卫的使用

全局路由守卫

  • beforeEach，全部页面进入前，能够在这里作权限管理，保存滚动条位置，保存当前页面数据状态，调起显示页面加载动画等。
// 接上面👆代码，router.config.js
import RouterConf from './router.config.js';

// to ,将要跳转的地址信息；now，如今的路由配置信息；next 执行跳转的方法，next(false)和没有next页面都将不跳转，能够 next('/login') 验证用户是否登陆而后跳转登陆，也能够 next(false) 阻止用户进入没有权限的页面。
RouterConf.beforeEach((to,now,next)=>{
  let token = localStorage.getItem('token')
  if(!token && to.name!=='login'){ // 防止路由登陆页也一直跳转登陆页
    next('/login')
  }
  else{
     next();
    }
})
  • afterEach，全部页面进入后。能够作一些页面标题的设置，初始化回到顶部等
import Vue from 'vue';

// 接上面👆代码，router.config.js
import RouterConf from './router.config.js';

// now 表示当前路由配置对象，from 表示上一个路由配置对象
RouterConf.afterEach((now,from)=>{
   document.title = now.meta.pageTitle;
    // 若是须要在页面渲染完以后处理一些事情
  Vue.nextTick(()=>{
    window.scroll(0,0);
  })
})

组件路由守卫

  • beforeRouteEnter(to,from,next)，组件加载进入时
  • beforeRouteUpdate(to,from,next)，路由地址更新后执行，好比 #/home => #/home?a=1
  • beforeRouteLeave(to,from,next)，能够经过 next(false) 阻止页面离开，比较好用，相见恨晚。
<script>
// home.vue
export default {
  mounted(){
    console.log('home mounted')
  },
  beforeRouteUpdate(to,from,next){
    next();
    },
  beforeRouteEnter(to,from,next){
    next();
    },
  beforeRouteLeave(to,from,next){
    // 能够弹个窗提示，用户是否确认离开，确认才离开当前页面，更严谨一点，须要判断是日后退仍是push新页面提交等等具体状况具体分析使用
    let confirmStatus = this.confirmStatus
    confirmStatus && next();
    },
}
</script>
切记beforeRouteUpdate，beforeRouteLeave，都须要手动调 next 才会进行下一步跳转。beforeRouteUpdate 暂未遇到什么使用场景。
  • 番外，没有发现 beforeRouteLeave 时，页面返回须要确认时的处理逻辑。
  1. 进入页面后，先用 pushState 在路由中添加一个记录，pushState 不会刷新页面用户无感知
  2. 而后监听路由变化，即 window.addEventListener('hashchange',function(){ },false) ；
  3. hashchange 回调中，判断是否须要弹窗提示
  4. 在表单点击提交，再也不须要保存当前页的数据时，先 history.go(-1) ，而后再移除hashchange 监听，再进行提交表单页面跳转等操做。

3. 路由组件使用

router-view

定义路由容器，路由引发的变化的内容都将在这个容器之中，配合 keep-alive 使用可缓存页面。web

<template>
    <div id="app">
    <div>
        不会随路由变化而变化的内容，能够存放一些全局使用内容，如提示信息等，经过使用 vuex 传递消息，或是 BusService 传递消息，使得内容显示或者隐藏以及具体显示内容
      </div>
    <keep-alive :includes="['home','list']">
          <router-view></router-view>
      </keep-alive>
  </div>
</template>

router-link

定义路由跳转，传入 to 属性，为一个对象，能够有 name(字符串)，path(字符串)，query(对象)，params(对象)算法

<!-- 假若有配置路由 {
    name:'detail',
    path:'detail/:id'
} -->
<template>
  <router-link :to="{name:'detail',params:{id:1},query:{name:'xx'}}"></router-link> 
  <!-- 上面渲染出的连接： #/detail/1?name=xx -->
  <router-link :to="{path:'/detail',params:{id:1},query:{name:'xx'}}"></router-link>
  <!-- 上面渲染出的连接： #/detail?name=xx -->
  <router-link :to="{name:'detail',path:'/detail',params:{id:1},query:{name:'xx'}}"></router-link>
  <!-- 上面渲染出的连接： #/detail/1?name=xx -->
</template>
注意使用 name 时，vue 将根据路由配置找到对应的 name，而后还原出 path，这时候若是路由配置的 path 是 '/detail/:id' 相似的形式，则将按这规则，还原完整的地址。

也就是当有 path 时，只照顾 query 参数。vue-router

有 name 时，对应路由配置信息找出 path，而后用 params 填充 path，再拼上 queryvuex

name 和 path 共存时，按 name 的规则走。(尽可能避免)element-ui

4. 路由方法的使用，$router & $route

$router，经常使用的如下几个方法

  • push，参数能够是字符串，表示要跳转的地址，或者一个对象，相似 router-link 的 to 的值
  • replace，替换一个地址，参数和 push 同
  • back，回退上一个页面
  • go，回退或前进 n 个页面
export default {
  mounted(){
    this.$router.push('/detail/1'); // 直接字符串形式
    this.$router.push({
      name:'detail',
      query:{a:1},
      params:{id:1}
    })； // 使用规则和 router-link 相似
    // this.replace 相似 push
    this.$router.back()
    this.$router.go(-2) // 后退
    this.$router.go(2) // 前进
  }
}

$route，路由参数信息对象(响应式)

组件中获取路由参数，经过 this.$route 获取

  • params，对应路由中的 'detail/:id' 配置，路由为 #detail/1 , 则 this.$route.params.id 为 1；
  • query，对应路由中的 ？后的值，如路由为 #detail/1?name=xx，则 this.$route.query.name 为 xx;
// 能够在 created 周期内获取
export default {
  data(){
    return {
      id:'',
      name:''
    }
  }
  created(){
    let { id } = this.$route.params;
    let { name } = this.$route.query;
    this.id = id || ''
    this.name = name || ''
  }
}

5. 路由懒加载配置

之前使用 require.ensure 实现路由懒加载，如今能够直接 ()=>import 实现了 
// router.config.js
export const RouterConf = [
  {
    path:'/home',
    component:()=> import(/* webpackChunkName: "home" */ './home.js')
  }
]

打包时，将以 home 命名。

待续

示例代码

整理完以后，将发布在 github 上
https://github.com/haokur/

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程