、transition 類名變更

在Vue2中，transition 組件，內置的過渡類名分別有：

• v-enter:作用于開始的一幀。
• v-enter-active:作用與整個過程。
• v-enter-to:作用于結束的一幀。
• v-leave：離開過渡的開始狀態，作用于開始的一幀。
• v-leave-active：作用于離開的整個過程。
• v-leave-to：作用于離開的最好一幀。

//使用案例：
<template>
 <transition name="box" >
  <div class="chart" v-if="show"></div>
 </transition>
</template>
<style>
 .chart{
  width:500px;
  height:200px;
  background:lightcoral;
}
.box-enter-active,.box-leave-active{
 transition:all 2s;
}
.box-enter,.box-leave-to{
  opacity:0
}
.box-enter-to,.box-leave{
  opacity:1
}     
</style>

在 Vue3 中 transition 類名變更有：

• v-enter --> v-enter-from
• v-leave --> v-leave-from

2、Event api 被移除

2.1、keyCode作為 v-on 的修飾符被移除

在vue2 中，使用 keyCode 指代某個鍵，如：

<input @keyup.13="submit" type="text" > 

回車鍵盤彈起時執行 submit 事件。

而 vue3 不再支持，只能使用 alias的方式，將keyCode替換成它的別名。

<input @keyup.enter="submit" type="text" > 

2.2、$on、$off 和 $once 被移除

$on 用于兄弟組件之間的數據傳輸。如：

//組件A
postValue(){
 Event.$emit('aevent','傳遞的值')
}

//組件B
mounted(){
 Event.$on('aevent',(val)=>{
   //val就是傳遞過來的值
 })
}

$off 是移除自定義事件的監聽

postValue(){
 this.$emit('aevent','傳遞的值')
 this.$off('aevent',()=>{
  //移除監聽器成功的回調，可加可不加
 })
}
// 父組件的 @aevent 中的事件只會執行一次

$once 監聽一個自定義事件，但是只能觸發一次，一旦觸發后，監聽器就會被移除。

<button @click.once="handleClick"></button>

在Vue3中，被認為不應該由 vue 提供，因此被移除了可以，可以使用其他的三方庫實現。如mitt.js

3、根容器區別

innerHTML 與 outerHTML 的區別

innerHTML 從開始到結束的全部內容，不包含 html 標簽 ，而 outerHTML 包含標簽。

vue2 與 vue3 根容器區別

vue2 中應用程序根容器的 outerHTML 會被根組件的模板替換，或編譯為模板。

vue3 中使用根容器的 innerHTML取代，作為模板。

可以給 <div id="app"></div> 添加一個類名，查看元素就可以看出來。

4、filter 過濾器被移除

在Vue2中，過濾器分為兩種：局部過濾器 和 全局過濾器。

全局過濾器：

Vue.filter( 'dFor', msg => {
 return msg.replace(/AA/g,'xxxxxx')
})

局部過濾器：

export default {
 filters:{
  dataFormat(s){
   return s+'aaa'
  }
 }
}

全局和局部過濾器相同名時，就近原則，使用局部過濾器，一個表達式可使用多個過濾器，使用"|"隔開，按順序執行。

但是在vue3中，將 filter 移除后，推薦使用計算屬性來展示，還可以全局注冊過濾計算屬性。

5、watch 監聽器改變

組件的 watch 選項和實例方法 $watch 不再支持點分割字符串路徑，可以使用計算函數作為 $watch 參數實現。

板基于 vue-cli4 和 Vant-ui 搭建，進行大型 H5 項目開發最佳實踐方案，讓我們來一探究竟

項目結構

本項目已經為你生成了一個完整的開發框架，下面是整個項目的目錄結構。

├── .github                    # git log
├── plop-templates             # 基本模板
├── public                     # 靜態資源
│   │── favicon.ico            # favicon圖標
│   └── index.html             # html模板
├── src                        # 源代碼
│   ├── assets                 # 靜態資源
│   ├── components             # 全局公用組件
│   ├── constants              # 常量
│   ├── core                   # 分層
│   ├── enum                   # 枚舉
│   ├── filters                # 全局 filter
│   ├── icons                  # 項目所有 svg icons
│   ├── lang                   # 國際化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store 管理
│   ├── styles                 # 全局樣式
│   ├── utils                  # 全局公用方法
│   ├── pages                  # pages 所有頁面
│   ├── pwa                    # 漸進式Web應用
│   ├── App.vue                # 入口頁面
│   ├── main.js                # 入口文件 加載組件 初始化等
│   └── permission.js          # 權限管理
├── tests                      # 測試
├── .editorconfig              # 代碼風格
├── .env.xxx                   # 環境變量配置
├── .eslintrc.js               # eslint 配置項
├── .sentryclirc.js            # 前端異常日志監控配置
├── .babel.config              # babel 配置
├── plopfile.js                # 基本模板配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json
...

安裝

# 克隆項目
git clone https://github.com/push-over/vue-h5-template.git

# 進入項目目錄
cd vue-h5-template

# 安裝依賴
npm install

# 建議不要用 cnpm 安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org

# 本地開發 啟動項目
npm start

TIP

強烈建議不要用直接使用 cnpm 安裝，會有各種詭異的 bug，可以通過重新指定 registry 來解決 npm 安裝速度慢的問題。若還是不行，可使用 yarn 替代 npm。

Windows 用戶若安裝不成功，很大概率是node-sass安裝失敗，解決方案。

另外因為 node-sass 是依賴 python環境的，如果你之前沒有安裝和配置過的話，需要自行查看一下相關安裝教程。

啟動完成后會自動打開瀏覽器訪問 [http://localhost:9000， 你看到下面的頁面就代表操作成功了。

接下來你可以修改代碼進行業務開發了，本項目內建了典型業務模板、模擬數據、狀態管理、國際化、全局路由等等各種實用的功能來輔助開發

常用命令

# 項目打包
npm run build:xxx

# 自動創建
npm run new

# 規范Git提交
npm run git-cz

# 生成CHANGELOG
npm run genlog

分層架構

目前前端的一個開發趨勢是以搭建單頁應用 (SPA) 為主的。當應用體系比較大，或者你的應用業務邏輯足夠復雜的時候，會遇到各種各樣的問題，我們隨便提兩點：

• 產品需要多人協作時，每個人的代碼風格和對業務的理解不同，導致業務邏輯分布雜亂無章
• 對產品的理解停留在頁面驅動層面，導致實現的技術模型與實際業務模型出入較大，當業務需求變動時，技術模型很容易被摧毀
• …

天給小伙伴們推薦一款超不錯的Vue輕量級組件框架XVueUI。

xvue-ui 基于vue2.x構建的響應式前端組件化框架。輕量級、易于上手，提供一系列豐富的css和js組件。

說明

• 一款基于vue.js開發的響應式框架,包含豐富的css和js組件。
• 除了基礎組件，還提供了很多封裝的大型組件。
• 輕量級，語義化標簽，上手簡單。
• 按需定制化很多專用組件。做到一個適用于任何應用的解決方案。

安裝

$ npm i xvue-ui -S

引入組件

在main.js中引入組件。

import Vue from 'vue';
import xvueui from 'xvue-ui';
Vue.use(xvueui);

使用組件

NPM使用示例。

<template>
  <div id="app">
    <x-button type="primary" @click="openHtmlDialog">彈窗插入html內容</x-button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      
    }
  },
  methods:{
    openHtmlDialog(){
      let that = this
      this.$Dialog.default({
          ...
      })
    }
  }
}
</scrip>

xvue-ui同樣支持CDN引入使用。

CDN使用示例。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>xvue example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src='https://cdn.jsdelivr.net/npm/xvue-ui@1.3.67/dist/xvue-ui.js'></script>
</head>
<body>
<div id="app">
    <x-button type="primary" @click="openHtmlDialog">彈窗插入html內容</x-button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            visible: false
        },
        methods:{
            openHtmlDialog(){
              let that = this
              this.$Dialog.default({
                  ...
              })
            }
        }
    })
</script>
</body>
</html>

提供了很多平時前端項目中需要用到的組件，需要的不可錯過。

非常nice的一款開源組件式框架。如果感興趣的話可以去看看哈！

# 文檔地址
https://www.xvue.cn/

# 倉庫地址
https://github.com/rohlin2019/xvue-ui

ok，今天就分享到這里。希望大家能喜歡~~