vue总结

已经使用vue有一段时间,并且写过两三个项目了,决定总结一下vue中常用到的东西,也算巩固一下,随着不断深入学习,也会不断的扩充这篇博客!一.Vue 1.1 v

已经使用vue有一段时间,并且写过两三个项目了,决定总结一下vue中常用到的东西,也算巩固一下,随着不断深入学习,也会不断的扩充这篇博客!

一.Vue

1.1 vue的常用指令和属性方法API:

  • v-if (v-if-else ,v-else) ,v-show(修改display的css属性让其显示或者隐藏), v-for( 是数组有index属性(item,index)in data ,是对象还有value,key属性(value,key,index)in data)

  • v-bind( 简写:(属性绑定)),v-on ( 简写 @ (事件绑定,也可直接修改vue内部变量))

  • v-model (语法糖,:bind="value"与@change="value = $event.target.value"的结合)

  • v-slot (有具名插槽和作用域插槽,具名插槽:让组件出现在想要出现的地方,作用域插槽,获取作用域中的数据(布尔值,number值,对象)来展示特定的样式或者组件)

  • data() { return {}} (存放页面数据的地方) , methods: {} 存放方法的地方

  • computed :{} 计算属性 (复杂的值计算,某个数据的和需要获取某个对象中的通过某种逻辑得到的值Vue.filters:用于简单的数据格式,在应用程序的多个位置都需要它 (时间戳转化成对应字符串)

  • Vue.nextTick :在下次DOM更新循环结束时执行回调(比如我们点击一个按钮,按钮变成一个input标签,并且获取input的焦点的时候,需要操作input这个dom元素,如果在按钮还没转换成input的时候就获取input的dom会报错)

1.2 Vue组件之间的通信

//在实际开发中,往往会在大组件中接收一定的数据,然后按需要,将某些数据传递给下面一个个的小组件,在小组件中,发生了某些事件,需要告诉父组件让其做出某种变化

父 => 子(传值) :
通过props向子组件传递数据
1.在子组件中 行为区域 通过props来声明需要接收父组件的数据 (可设置类型和默认值)
2.在父组件中使用子组件的时候通过 绑定自定义属性 (<cpn :message='message'><cpn>将数据传入到子组件

子 =>父 (传递事件消息):
通过自定义事件和$emit
1.在子组件对应的标签中,绑定对应事件,传入想要传递给父组件的参数 (@click='btnclick(item)'                                                   事件方法中使用emit发射 this.$emit('itemclick',item))
2.在父组件中使用子组件的时候,监听子组件发出的事件 (<cpn @itemclick='cpnclick'><cpn> )

父 =>子 (父组件访问子组件的属性):
1.$children (不推荐)
2.$refs 和 ref  (推荐, ref绑定组件且命名,this.$refs调用)

子 =>父 (子组件访问父组件的值):
1.$parent  (不推荐)
一般开发中都不会这样做,因为应该避免直接访问父组件,这样耦合度太高了

跨多层组件通信:
1.事件总线EventBus
2.VueX

1.3 生命周期和钩子函数

1.beforeCreat():实例在完全创建出来 之前 会执行它,data和methods中数据还没初始化

2*.created():data和methods已经完成初始化,vue开始编译模板,在内存中生成一个编译好的模板字符串,然后渲染成dom  ( 一般网络请求都在这里进行,因为data和methods完成初始化,可赋值)

3.beforeMount():模板在内存中已经编译好了,但是没有渲染到页面中,页面显示的还仅仅是模板字符串

4.*Mounted() :模板已经真实的挂载到了页面中,页面中DOM创建完成 (一般在这里进行dom元素的操作)

5.beforeUpdated():data中的数据已经被更新,但是页面中的data还没被替换

6.updated(): 执行它时,页面和data中的数据已经同步了

//还有几个其他的钩子函数
 activated函数:keep-alive组件激活时调用
 deactivated函数:keep-alive组件停用时调用
 beforeDestroy:vue(组件)对象销毁之前
 destroyed:vue组件销毁后   (一般用这几个函数测试,组件是否被缓存等操作)

二.Vue-Router

如何安装和配置不再这里概述,这里总结几个常用的方法

主要就是 创建路由组件 => 配置路由映射对应组件 => 使用路由 (

router-view 路由占位符,用于可以嵌套路由(多级组件展示)
注意:
如何让路径默认跳转到首页
{
    path:'/',
    redirect:'/home'
}
------------------------------------------------------------------------------------------------
router-link 用于动态路由 (多个用户使用同一个组件展示,路由需要依靠用户的不同展示不同的路由)
注意:
  {
    path:'user/:id',
    component:User
  }
  <div>
    <h2> {{ $route.params.id}} </h2>
  </div>
  <router-link to='/user/123'>用户<router-link>
------------------------------------------------------------------------------------------------
  导航守卫:
      
  导航:表示正在发改变,守卫:监听路由的进入和离开,并且在这其中进行对应的操作
      
  vue-router提供了beforeEach和afterEach的钩子函数,它们会在路由即将改变前和改变后触发
      
  用处案例:1.比如登陆前通过导航守卫验证token值后才能访问其他页面  2.比如跳转页面后需要修改页面小标题等等
 
  • 跳转路由:this.$router.push(' /...')
  • 获取当前路由信息:this.$route 可以获取name,path,query,parmas
  • 路由懒加载 使用import的形式
  • keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染, 细节用法查看文档

三.VueX

//作用状态管理,把所有组件共享的变量全部存储到一个对象当中,然后把这个对象放到顶层的实例中,供所有组件使用
//为什么不自己封装一个对象来管理?因为vuex在内部帮我们完成了数据的响应

vuex的几个模块:
state  getters   mutations actions  module

1.state     类比data (只保存数据,不做处理)

2.getters   类比计算属性  (需要获取某种state异变的数据)

3.mutations 类似事件 (更新数据的唯一方式),mutations里定义的每一个函数都会接收state作为第一个参数(多个参数的具体用法查看博客或者文档)//注意:当我们需要改变vuex的值的时候,不能直接调用mutations里的函数,而是应该先在组件中注册一个“函数事件”(this.$store.commit('xxx')),然后在mutations中进行处理( xxx(state){ state.count++ })

4.actions  类似mutations,用来处理异步操作,比如网络请求和文件上传(本质还是mutations),为什么多此一举?当mutations进行异步操作的时候官方插件devtools监控不到异步操作
// mutations调用使用commit:this.$store.commit('xxx'),actions使用dispatch:this.$store.dispatch('xxx)  在actions使用的时候第一个接收的参数为context,mutations为state,然后再异步中使用context去进行commit操作,比如:定时器为异步,定时器写在actions定义的函数中,当定时器中的操作改变state数据是,就要:context.commit('xxx'),由actions注册mutations函数,再在mutations定义函数xxx进行操作 。(还有多参数,和结合promise的使用具体看之前写的具体vuex博客或官方文档)

5.module  当项目不断迭代,数据越来越多的时候,store单一文件来管理数据显得太过臃肿,我们可以将上面几个类别分割成不同的module来进行分类保管

四.原理剖析

  1. 虚拟dom是什么?

    就是一个对象,来描述dom节点,因为每个真实dom身上都会绑定很多属性,当比较多的dom元素一起改变,增加的时候,就会消耗性能,我们用一些简约的属性来代替真实dom (一般当页面做出改变时,时全部dom元删除,重新创建,而引入虚拟dom就可以进行比对,只更新替换改变了的dom元素)

  2. v-for中key的作用?

    优化虚拟dom中的diff算法操作,key的作用主要是为了高效的更新虚拟DOM

    比如:当插入元素的时候,diff算法会更新插入后面的所有元素,而如果给每个节点一个唯一的key值,diff算法会检测识别到插入元素后面的元素之前也有,可以复用,只需要更新插入的这一个dom就可以

  3. 为什么key不推荐绑定索引值index

    因为key值的作用就是给节点加唯一标识,复用相同节点优化性能,但是如果给key值绑定index就不是唯一标识,当列表中间的节点发生增删的时候,后面的key值也会变化,重新渲染,影响性能,还可能会产生bug,比如:如果列表的select选项绑定了key值,如果元素发生了改变,index就会变,select也变成了其他元素,出现bug

标签: 文档 按钮 网络