当前位置：首页 > news >正文

vue总结

news 来源：原创 2024/6/1 16:09:27

条件渲染 v-if vs v-show

v-show 要切换显示内容，初始化开销大
v-if 根据状态只显示某个内容，状态切换概率小，切换开销大
使用key管理可复用的元素（比如切换登录方式，不同方式登录内容是一样的），速度快

<tab v-model="index">
// 根据index切换显示不同内容
</tab>
<div>
  // 根据index显示不同的数据（组件内部根据外面的提供的状态获取数据）
  <div class="item">
    // 这里将v-show改为v-if切换tab并没有执行拉取数据
    <div v-show="index === 0">
      <user-trip-item 
        @setHasContent="setHasContent"
        :name="'unpaid'">
      </user-trip-item>
    </div>
    <div v-show="index === 1">
      <user-trip-item 
        @setHasContent="setHasContent"
        :name="'planned'">
      </user-trip-item>
    </div>
    <div v-show="index === 2">
      <user-trip-item 
        @setHasContent="setHasContent"
        :name="'not_reviewed'">
      </user-trip-item>
    </div>
    <div v-show="index === 3">
      <user-trip-item 
        @setHasContent="setHasContent"
        :name="'completed'">
      </user-trip-item>
    </div>
  </div>
</div>
// 子组件
// 根据不同的状态获取按钮的文字并执行不同的方法，这里可以用到表驱动法分发事件
<div >
  <div class="trip__list" v-for="(item, index) in items">
    <img 
      @click="toOrderDetail(item.orderNumber)"
      class="cover" 
      :src="item.coverPicture">
    <span class="flag">{{item.stateLabel}}</span>
    <div class="info">
      <h3 
        @click="toPorductDetail(item.productId)"
        class="title">{{item.productTitle}}</h3>
      <p class="date">{{item.startTime}}</p>
      <div class="info__bt">
        <span class="price">{{item.currency}}{{item.orderAmount}}</span>
        <span
          @click="dispatchEvent(item.state, item)"
          class="status"
          v-if="statusText[item.state] !== ''">{{statusText[item.state]}}</span>
      </div>
    </div>
  </div>
</div>

表驱动法

http://note.youdao.com/notesh... 《代码大全2》表驱动法

vue编写可复用组件

http://note.youdao.com/notesh... 登录模块
一般某个内容重复使用3次以上就要考虑写成可复用组件了，可复用组件需要定义一个清晰的公开接口

数据获取可以通过父组件props或者某种状态标示子组件内部去拉数据
改变外部内容event($on、$emit) 可以通过向外暴露方法内部$emit()触发执行
插槽slot预留空间给外部显示额外的自定义内容

组件缓存 keep-alive

keep-alive主要用于保留组件状态或避免重新渲染，include、exclude属性允许组件有条件的缓存

疑问：如何设置路由部分组件缓存？

<keep-alive>
  // 路由切换的时候会重新渲染拉取数据，比如当地人中心设置语言成功后回到编辑页，重新拉取数据而没有保存语言选择的内容
  <router-view></router-view>
</keep-alive>
// 改为即可
<keep-alive>
  <router-view></router-view>
</keep-alive>

路由导航 router

// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当钩子执行前，组件实例还没被创建
beforeRouteEnter (to, from, next) {
  next(vm => {
    vm.languages = to.query.languages
    vm.defaultLang = to.query.defaultLang
    vm.setLanguageList()
  })
}

beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
// 设置next(isSave)，false来禁止用户在还未保存修改前突然离开，true则不禁止，可以设置一个变量来监听用户是否填写了信息从而是否禁用导航
}

// 编程式导航 带参数的路由（可以通过路由传递和更改数据）
// 传递参数给子路由
<div @click="toPath('/profile/modifyLanguage')"></div>
toPath (path) {
    this.$router.push({
      path: path,
      query: {
        languages: this.languages,
        defaultLang: this.oData.systemLanguages
      }
    })
  }
beforeRouteEnter (to, from, next) {
  next(vm => {
    if (from.path === '/profile/modifyLanguage') {
      vm.languages = to.query.languages // 获取子路由传过来的数据
    }
    if (from.path === '/') {
      if (vm.userRole === 1) {
        vm.getProfile('user')
      } else {
        vm.getProfile('guide')
      }
    }
  })
}
// 子路由传递数据给父路由
methods: {
  saveLanguage () {
    this.$router.push({ 
      path: '/profile',
      query: { // 传递数据给父路由（把语言传过去）
        languages: this.getSaveData()
      }
    })
  }
}
beforeRouteEnter (to, from, next) {
  next(vm => { // 获取父路由传递过来的数据
    vm.languages = to.query.languages 
    vm.defaultLang = to.query.defaultLang
    vm.setLanguageList()
  })
}