正文
版本
1.alpha 内测版本
2.beta 公测版本
3.Gamma 正式发布的候选版本
4.Final 正式版
5.plus 增强版
6.full 完全版
7.Trial 试用版(一般有时间或者功能限制)
vue3.0 的优势在哪?
vue3.0和vue2.0的区别
vue3.0的环境搭建
yarn global add @vue/cli
# OR
npm install -g @vue/cli
Compsition API :
setup函数
<template>
<div>
<span style="padding: 10px;">{{num}}</span>
<button @click="btnClickFn">增加</button>
</div>
</template>
<script>
// ref 是 vue 3.0 的一个重大变化,其作用为创建响应式的值
import { ref } from 'vue' // 带 ref 的响应式变量
export default {
name: 'Hone',
setup(){
// 定义了一个响应式常量
const num = ref(0)
// 定义点击按钮事件改变num值
const btnClickFn = ()=>{
// 通过.value 修改值
num.value +=1
}
console.log(this) // undefined
// 导出以上定义的模板
return{
num,
btnClickFn
}
}
}
</script>
Compsition API :
ref 响应式引用
<template>
<div id="app">
{{ count }}
</div>
<button @click="btnClickFn()"></button>
</template>
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup() {
const count = ref(0)
const btnClickFn = ()=>{
count.value +=2
}
return {
count
}
}
}
</script>
<template>
<div id="app" ref="root">
{{ count }}
</div>
<button @click="btnClickFn()"></button>
</template>
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup() {
const count = ref(0)
const root = ref(null)
const btnClickFn = ()=>{
count.value +=2
}
onMounted(()=>{
// DOM元素将在初始渲染后分配给ref
console.log(root) // 这是根元素
})
return {
count,
root
}
}
}
</script>
Compsition API :
reactive响应式对象
<template>
<div id="app">
{{ state.count }}
</div>
</template>
<script>
// 从 vue 中导入 reactive
import {reactive} from 'vue'
export default {
name: 'App',
setup() {
// 创建响应式的数据对象
const state = reactive({count: 3})
// 将响应式数据对象state return 出去,供template使用
return {state}
}
}
</script>
Compsition API :
toRefs
// 导入toRefs
import { reactive, toRefs } from 'vue'
// 改变 return
return {
...toRefs(state)
}
// 这里要注意,直接...展开的是没有响应普通值,所以我们需要toRefs转换为响应式值;
Compsition API :
生命中周期函数
vue2 | vue3 |
---|---|
beforeCreate | setup() |
created | setup() |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
beforeDestroy | onBeforeUnmount |
destroyed | onUnmounted |
errorCaptured | onErrorCaptured |
activated | onActivated |
deactivated | onUpdated |
updated | onDeactivated |
computed(计算函数)
// 计算属性
setup() {
const state = reactive({
num: 0
})
// 计算属性
const newNum = computed(()=>{
return state.num * 2
})
return {
newNum,
...toRefs(state),
};
},
setup() {
const state = reactive({
num: 0
})
// 计算属性
const newNum = computed({
get (){
return state.num * 2
},
set (newVal){
console.log(newVal)
return newVal * 2
}
})
return {
newNum,
...toRefs(state),
};
},
Compsition API :
watch && watchEffect (监听)
<script>
import {ref, watch} from 'vue'
export default {
setup() {
const state = ref(0)
watch(state, (newValue, oldValue) => {
console.log(`原值为${oldValue}`)
console.log(`新值为${newValue}`)
/* 1秒后打印结果:
原值为0
新值为1
*/
})
// 1秒后将state值+1
setTimeout(() => {
state.value ++
}, 1000)
}
}
</script>
<script>
import {reactive, watch} from 'vue'
export default {
setup() {
const state = reactive({count: 0})
watch(() => state.count, (newValue, oldValue) => {
console.log(`原值为${oldValue}`)
console.log(`新值为${newValue}`)
/* 1秒后打印结果:
原值为0
新值为1
*/
})
// 1秒后将state.count的值+1
setTimeout(() => {
state.count ++
}, 1000)
}
}
</script>
<template>
<div>
</div>
</template>
<script>
import {reactive, watch} from 'vue'
export default {
setup() {
const state = reactive({ count: 0, name: 'zs' })
watch(
[() => state.count, () => state.name],
(newval,oldval) => { // ([newcount,newname],[oldcound,oldname]) 对应取值
console.log(newval) // 通过下标获取对应的值
console.log(oldval) // 通过下标获取对应的值
}
)
setTimeout(() => {
state.count ++
state.name = 'ls'
}, 1000)
}
}
</script>
<script>
import {reactive, watchEffect} from 'vue'
export default {
setup() {
const state = reactive({ count: 0, name: 'zs' })
watchEffect(() => {
console.log(state.count)
console.log(state.name)
/* 初始化时打印:
0
zs
1秒后打印:
1
ls
*/
})
setTimeout(() => {
state.count ++
state.name = 'ls'
}, 1000)
}
}
</script>
watchEffect 侦听模板引用
<template>
<div ref="root">This is a root element</div>
</template>
<script>
import { ref, watchEffect } from 'vue'
export default {
setup() {
const root = ref(null)
watchEffect(() => {
// 这个副作用在 DOM 更新之前运行,因此,模板引用还没有持有对元素的引用。
console.log(root.value) // => null
})
return {
root
}
}
}
</script>
<template>
<div ref="root">This is a root element</div>
</template>
<script>
import { ref, watchEffect } from 'vue'
export default {
setup() {
const root = ref(null)
watchEffect(() => {
console.log(root.value) // =>
},
{
flush: 'post' // 如果没有配置,默认DOM 更新之前运行
})
return {
root
}
}
}
</script>
Compsition API :
toRaw
<template>
<p>{{ state.name }}</p>
<p>{{ state.age }}</p>
<button @click="change">改变</button>
</template>
<script>
import {reactive} from 'vue'
export default {
setup() {
const obj = {
name: '小明',
age: 22
}
const state = reactive(obj)
function change() {
state.age = 90
console.log(obj); // 打印原始数据obj
console.log(state); // 打印 reactive对象
}
return {state, change}
}
}
</script>
<script>
import {reactive, toRaw} from 'vue'
export default {
setup() {
const obj = {
name: '前端印象',
age: 22
}
const state = reactive(obj)
const raw = toRaw(state)
console.log(obj === raw) // true
}
}
</script>
Compsition API :
markRaw
<template>
<p>{{ state.name }}</p>
<p>{{ state.age }}</p>
<button @click="change">改变</button>
</template>
<script>
import {reactive, markRaw} from 'vue'
export default {
setup() {
const obj = {
name: '前端印象',
age: 22
}
// 通过markRaw标记原始数据obj, 使其数据更新不再被追踪
const raw = markRaw(obj)
// 试图用reactive包装raw, 使其变成响应式数据
const state = reactive(raw)
function change() {
state.age = 90
console.log(state);
}
return {state, change}
}
}
</script>
Compsition API :
provide && inject
// A.vue
<script>
import {provide} from 'vue'
export default {
setup() {
const obj= {
name: '前端印象',
age: 22
}
// 向子组件以及子孙组件传递名为info的数据
provide('info', obj)
}
}
</script>
// B.vue
<script>
import {inject} from 'vue'
export default {
setup() {
// 接收A.vue传递过来的数据
inject('info') // {name: '前端印象', age: 22}
}
}
</script>
// C.vue
<script>
import {inject} from 'vue'
export default {
setup() {
// 接收A.vue传递过来的数据
inject('info') // {name: '前端印象', age: 22}
}
}
</script>
# 父组件
export default {
name: "Home",
setup() {
const state = reactive({
num: 0,
updateFn(){
state.num +=1
}
})
const data = toRefs(state) // 响应式数据
provide('user',data.num)
provide('update',data.updateFn) // 父组件定义修改事件,子组件来接受调用
return {
...toRefs(state),
};
},
};
# 子组件
setup(props,context) {
const num = inject('user')
const updata = inject('update') // 注意inject 不能定义在reactive 对象里!
const state = reactive({
addClickFn(){
console.log(updata) // 返回一个property 对象
console.log(updata.value()) // 调用修改方法
}
})
return {
num,
...toRefs(state)
}
}
Compsition API :
getCurrentInstance
// min.js
app.config.globalProperties.$hello = () => {
console.log('hi~hello')
}
<template>
<p>{{ num }}</p>
</template>
<script>
import {ref, getCurrentInstance} from 'vue'
export default {
setup() {
const num = ref(3)
const instance = getCurrentInstance() // 这里面可以看到你全局定义的属性
console.log(instance)
// 如果熟悉里面的数据可以写成:
// const { ctx ,proxy }= getCurrentInstance()
// conosle.log(proxy.$hello)
// 你会发现,ctx 和 proxy 里面没有$hello属性,但是,proxy 可以访问到
return {num}
}
}
</script>
Compsition API :
ref(获取标签元素)
<template>
<div>
<div ref="el">div元素</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
// 定义或创建一个DOM引用,名称必须与元素的ref属性名相同
const el = ref(null)
// 在挂载后才能通过 el 获取到目标元素
onMounted(() => {
el.value.innerHTML = '内容被修改'
})
// 把创建的引用 return 出去
return {el}
}
}
</script>
未完待续~~请关注vue3.0基础开发使用及分享(如:组件通信、状态管理Vuex 、路由router等)