從vue3.0面世后又谋，伙伴們都自發(fā)感嘆“學(xué)不動啦！！雪侥！”
不要慌 尤大大還是很良心的出了份API的 ~
先讓項目跑起來再說吧??
- 全局安裝vue-cli
npm install -g @vue/cli
- 安裝橋接（橋接的意思大概就是兼容，vue2.0的命令也能用起來）
npm install -g @vue/cli-init
- 查看vue安裝版本
vue -V
- 創(chuàng)建目錄
//2.x
vue init webpack my-project
//3.x
vue create my-project
- 跑項目
vue3.0和vue2.0的區(qū)別：
區(qū)別一：vue-cli3.0相對比vue-cli2.0少了 vue-build.js和vue-config.js
區(qū)別二：vue-cli3.0 要自己在項目根目錄下配置 vue-config.js
區(qū)別三：跑項目時輸入命令不同（run后面的dev或serve都是可以由自己在package.json里面配置的精绎，默認是以下）
//2.x
npm run dev
//3.x
npm run serve
區(qū)別四：語法的不同速缨，看以下新特性。
vue3.0新特性
由于vue3.0依賴于composition API代乃，我們先安裝個依賴：
npm install @vue/composition-api --save
在vue-cli項目中找到main.js旬牲，引入composition-api：
// main.js
import VueCompositionApi from "@vue/composition-api";
Vue.use(VueCompositionApi);
整理vue3.0新特性：
-
setup 函數(shù)：
setup函數(shù)內(nèi)放置類似vue2.0的data數(shù)據(jù)，生命周期搁吓，自定義函數(shù)等等原茅；
export default{
setup(props,context){
console.log(context.attrs) // 相當(dāng)于this.$attrs
console.log(context.slots) // 相當(dāng)于this.$slots
console.log(context.parent) // 相當(dāng)于this.$parent
console.log(context.root) // 相當(dāng)于this.$root
console.log(context.emit) // 相當(dāng)于this.$emit
console.log(context.refs) // 相當(dāng)于this.$refs
}
}
-
Reactive 函數(shù)
用于聲明單一對象變量
import { reactive } from '@vue/composition-api';
export default{
setup(props,context){
// 聲明對象
const obj = reactive({ a:1 });
// 獲取對象值
console.log(obj.a) // 1
}
}
-
ref 對象
用于聲明基礎(chǔ)數(shù)據(jù)類型變量，帶有value屬性
import { ref } from '@vue/composition-api';
export default{
setup(props,context){
// 聲明值
const str = ref("abc");
// 獲取值
console.log(str.value) // abc
}
}
-
isRef 和 toRef
isRef：判斷對象是否ref對象堕仔；
toRef：把當(dāng)前對象轉(zhuǎn)換成ref對象擂橘；
import { reactive,ref,isRef,toRefs } from '@vue/composition-api';
export default{
setup(props,context){
const obj = reactive({ a:1 });
const refObj = isRef(obj) ? obj : toRefs(obj);
console.log(refObj.value); // {a:1}
const str = ref("abc");
const refStr = isRef(str) ? true : false;
console.log(refStr.value); // true
}
}
- watch 偵聽器
import { ref } from '@vue/composition-api';
import { watch } from 'vue';
export default{
setup(props,context){
const str = ref("abc");
watch(()=>{
return str.value //一般用于監(jiān)聽對象中的單個屬性,因為watch第一個參數(shù)類型得是對象
},(state,preState)=>{
console.log(`新的值是${state}第练，舊的值是${preState}`)
})
str.value = "efg"; // 此時瀏覽器輸出：新的值是efg芯咧，舊的值是abc
}
}
- computed 計算屬性
import { ref } from '@vue/composition-api';
import { computed } from 'vue';
export default{
setup(props,context){
const count = ref(1);
let plusOne = computed({
get: ()=> count.value + 1,
set: ()=> { }
})
console.log(plusOne); // 2
}
}
前端妹子整理至此，有錯誤的請及時指正哈 -(●'?'●)-
