vue总结

Posted 2021-03-11 jcdxh

已经使用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

四.源码剖析