Vue3.0 && Vue3.0初体验 一
vue2.x -> vue3.0 变化
Vue3.0 可以完全支持Vue2.0!!!!, 升级以后不需要更改关于Vue的代码,但是你引用的插件就...,看运气了.
在说变化之前，我们先看一下vue3.0怎么创建项目.
第一种方法：vite
npm init vite-app 项目名
cd 项目名
npm run dev
复制代码优点: 快就完了. (不需要通过webpack编译)
缺点: 不稳定,还要需要自己安装 vue-router, vuex, (敲重点,vue-router, vuex都要用4.0, 安装的时候还容易出错, enenen,出错肯定是我电脑问题, 和vite没有关系....
不稳定也是个人感觉,大家可以试一下,vite应该还是很好用的,不然尤大大也不会连发6条微博来证明
第二种方法
npm install -g @vue/cli
vue create 项目名
cd 项目名
vue add vue-next //重点 执行这行,会把2.0代码改为3.0的, vue-router, vuex会变成4.0的
npm run serve
复制代码这个优缺点就不说了, 毕竟大家都是老手!
变化一 mian.js
mian.js里的变了 多了createApp方法
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './App.scss'
const app = createApp(App)
app.use(router).use(store).mount('#app');
复制代码由于这里用了 import { createApp } from 'vue'; 而不是import Vue from 'vue', 所有使用一些Ui框架,以及第三方的包都会报以下的错. 遇到这个报错,基本上就说明你用的这个插件不支持Vue3.0了.
变化二 Vue-router, Vuex
Vue-router, Vuex 有点小变化, 后面第二章再讲,或者也可以看一下我的源码, 你们都是大牛,你们一定可以一下子就可以看出来区别.
变化三 template模板部分
vue2.0里 template模板里只能有一个根标签, 而3.0可以使用多个根标签
Look here, template标签有两个div, 在2.0是会报错的
变化四 Composition API
在vue2.0里我们都把.vue文件里的js部分叫做Function API, 而在3.0里变为Composition API 这里是变化最大的地方,快看下图 (敲重点: import { setup, watch, reactive, toRefs, onMounted } from "vue")
看到这里有何感想。en， 我们还没有开始， 重点，Vue3.0新特性来了。
Composition API 是什么
setup 函数
setup 函数是一个新的Vue组件， 是Composition API 入口
<template>
</template>
<script>
import { setup } from 'vue'
export default {
setup(props, context) {
//这里的props大家应该知道是啥吧，父组件传的值
// context是什么？
//在setup()里我们不能用this
//所以vue2.0里的 this.$emit, this.$psrent, this.$refs在这里都不能用了。
//context就是对这些参数的集合
//context.attrs
//context.slots
//context.parent 相当于2.0里 this.$psrent
//context.root 相当于2.0里 this
//context.emit 相当于2.0里 this.$emit
//context.refs 相当于2.0里 this.$refs
...
}
}
</script>
<style>
</style>
复制代码数据声明
vue2.0 里数据都是在data()里声明， 而在3.0里也取消了data(), 引用了Reactive(), ref()
ref() 声明单一基础数据类型时使用
注意： 定义的变量，函数都要 return 出来
<template>
<div>{{count}}</div>
</template>
<script>
import { setup， ref } from 'vue'
export default {
setup(props, context) {
let count = ref(0)
console.log(count.value) //0 ， 内部获取时需要用.value来获取
console.log(isRef(count)) //true //isRef() 用来判断是不是ref对象
return {
count // ref返回的是一个响应式的对象
}
}
}
</script>
<style>
</style>
复制代码Reactive() 声明单一对象时使用
<template>
<div>{{data1}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
setup(props, context) {
const obj = reacttive({
data1: '123',
data2: {}
})
return {
...torefs(obj)// 把obj转为响应式的ref，不然template里获取不到
}
}
}
</script>
<style>
</style>
复制代码watchEffect() 监听props
// 父组件.vue
<template>
<ZiComp val:'1'/>
</template>
<script>
import ziComp from './ziComp.vue'
export default {
components： {
ziComp
}, //components方法也是和2.0相同
setup(props, context) {
}
}
</script>
--------------------------------------
//ziComp.vue
<template>
<div>{{obj.data1}}</div>
</template>
<script>
import { Reactive } from 'vue'
export default {
props: ['val'], //这里获取props和 2.0 一样,也可以用对象形式
setup(props, context) {
watchEffect(() => { //首次和props改变才会执行这里面的代码
console.log(props.val)
})
}
}
</script>
<style>
</style>
复制代码watch() 监听器
监听单个数据
<template>
<div>{{count}}</div>
</template>
<script>
import { Reactive } from 'vue'
export default {
setup(props, context) {
let count1 = ref(0)
let state = reactive({
count2: 0
)
//监听reactive类型
watch(
() => state.count2， //这里是你要监听的数据
(count， preCount) => { //count新值， preCount旧值
console.log('') //这里是监听数据变化后执行的函数
}, {lazy： false}//在第一次创建不监听)
//监听ref类型
watch(count1，(count， preCount) => { //count新值， preCount旧值
console.log('') //这里是监听数据变化后执行的函数
})
return {
count
...toRefs(state)
}
}
}
</script>
<style>
</style>
复制代码监听多个数据
<template>
<div>{{count}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
setup(props, context) {
let count1 = ref(0)
let name1 = ref(0)
let state = reactive({
count2: 0，
name2： 'yangy'
)
//监听多个reactive类型
watch(
[() => state.count2, () => state.name2]
([count， name], [preCount， preName]) => { //count新值， preCount旧值
console.log('') //这里是监听数据变化后执行的函数
},
{
lazy： false
})//在第一次创建不监听
//监听ref类型
watch(
[count2, name2]
([count， name], [preCount， preName]) => { //count新值， preCount旧值
console.log('') //这里是监听数据变化后执行的函数
}, {lazy： false}//在第一次创建不监听)
return {
count，
...toRefs(state)
}
}
}
</script>
<style>
</style>
复制代码computed() 计算属性 可创建只读，和可读可写两种
<template>
<div>{{addCount}}</div>
<div>{{addCount2}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
setup(props, context) {
let count = ref(0)
setup () {
const count = ref(0)
const addCount = computed(() => count.value + 1) //只读 ，count.value变化后执行加1
const addCount2 = computed({
get:() => count.value + 1,
set: (value) => count.value = value
})
// addCount2.value = 10 //赋值方法
return {
count,
addCount,
addCount2
}
}
}
}
</script>
<style>
</style>作者：YangY在掘金
链接：https://juejin.cn/post/6847902215458258958
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
