一、准备工作
Vue-cli版本：4.2.2
cli版本只要在3.x以上即可。
二、创建项目
-
运行以下命令来创建一个新项目：
vue create myVueApp
myVueApp是项目名称，自行命名
-
如果已有vue2.*项目需升级，确认Vue-cli版本是4以上即可；
可在命令面板输入vue -V 查看版本，如果低于4版本或报错，可npm uninstall vue-cli卸载后重新安装npm install @vue/cli；
-
要使用测试版的话，还需要在项目里装一个插件，使用以下命令：
vue add vue-next
三、六大亮点
1. Performance：性能更比Vue 2.0强。
- 重写了虚拟Dom的实现（且保证了兼容性，脱离模版的渲染需求旺盛）。
- 编译模板的优化。
- 更高效的组件初始化。
- update性能提高 1.3~2 倍。
- SSR速度提高了 2~3 倍。
2. Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。
- 可以将无用模块“剪辑”，仅打包需要的（比如v-model,，用不到就不会打包）。
- 一个简单“HelloWorld”大小仅为：13.5kb，Composition API仅11.75kb。
- 包含运行时完整功能：22.5kb，拥有更多的功能，却比Vue 2更迷你。
很多时候，我们并不需要 vue提供的所有功能，在 vue 2 并没有方式排除掉，但是 3.0 都可能做成了按需引入。
3. Composition API：组合API
首先Composition API是函数式编程，它使代码的复用性更强。与React Hooks 类似的东西，实现方式不同。
下一个主要版本的Vue中讨论的最常见的就是Composition AP的特色语法的。 这是一种全新的逻辑重用和代码组织方法。
- setup()
组件的启动函数需要用到setup()，这个函数相当于2.x版的beforeCreate()和created()这两个生命周期钩子函数。
以下是官方文档介绍：
演示代码：
<script>
import { ref, computed, onMounted } from 'vue'
export default {
setup() {
const count = ref(0)
const double = computed(() => count.value * 2)
function increment() {
count.value++
}
onMounted(() => console.log('component mounted!'))
return {
count,
double,
increment
}
}
}
</script>
- reactive和ref
原先通过data中声明的响应式属性，现在替换成由 reactive、ref 函数来创建，来实现数据的响应式；
ref只可以监听简单数据，reactive可以监听所有数据；
<template>
<div>
<home-header></home-header>
<home-swiper :list="swiperList"></home-swiper>
<home-icons :list="iconList"></home-icons>
<home-recommend :list="recommendList"></home-recommend>
<home-weekend :list="weekendList"></home-weekend>
</div>
</template>
<script>
// Composition API
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios'
import { useStore } from 'vuex'
import { ref, onMounted } from 'vue'
export default {
name: 'Home',
components: {
HomeHeader,
HomeSwiper,
HomeIcons,
HomeRecommend,
HomeWeekend
},
setup() {
const swiperList = ref([])
const iconList = ref([])
const recommendList = ref([])
const weekendList = ref([])
const store = useStore()
const city = store.state.city
async function getHomeInfo() {
let res = await axios.get('/api/index.json?city=' + city)
res = res.data
if (res.ret && res.data) {
const result = res.data
swiperList.value = result.swiperList
iconList.value = result.iconList
recommendList.value = result.recommendList
weekendList.value = result.weekendList
}
}
onMounted(() => {
getHomeInfo()
})
return { swiperList, iconList, recommendList, weekendList }
}
}
</script>
-
vuex
import { useStore } from 'vuex' setup() { const store = useStore() const city = store.state.city } -
vue-router
import { useRouter } from 'vue-router' setup(props) { const store = useStore() const router = useRouter() const currentCity = store.state.city const elems = ref({}) const wrapper = ref(null) const sroll = null function handleCityClick(city) { store.commit('changeCity', city) router.push('/') } watch(() => props.letter, (letter, prevLetter) => { if (letter && scroll) { const element = elems.value[letter] scroll.scrollToElement(element) } }) onMounted(() => { scroll = new Bscroll(wrapper.value, { click: true }) }) return { elems, wrapper, currentCity, handleCityClick } } -
vue3.0中已经不存在this的写法；
如果必须的话可以通过
import { context } from vue
例如：
this.city = city 可改写成 context.city = city;
