入口文件 ./src/main.js
// 引入工厂函数,而非Vue构造函数
import {createApp} from 'vue'
import App from './App.vue'
// 创建应用实例对象,比Vue实例轻
const app = createApp(App)
// 挂载
app.mount('#app')
vue2中的数据,计算属性,方法,生命周期钩子等都可以在setup函数中构造 setup函数返回:
<template>
<!-- 可以支持多个根标签 -->
<h1>{{ msg }}</h1>
<button @click="onClick">click</button>
</template>
<script>
export default {
name: 'HelloWorld',
setup() {
// 非响应式变量
let msg = props.props1 || 'hello world';
function onClick() {
alert(msg)
}
return {
msg,
onClick
}
}
}
</script>
注,默认setup返回对象中的变量是非响应式变量,使用ref/reactive创建响应式变量 2. 渲染函数 ./component/HelloWorld.vue
<script>
// 引入渲染函数
import {h} from 'vue'
export default {
setup(){
return ()=> { return h('h1','hello') }
}
}
</script>
beforeCreate之前执行,this为undefined
props: ['prop1'],
// vue3需要暴露可用事件,否则会报警告
emits: ['my-event'],
setup(props, context) {
// 取props属性
props.prop1
// 取props没定义的传入属性,传入props没有定义的属性会报警告,相当于vue2中的this.$attrs
context.attrs.prop2
// 触发事件,相当于vue2中的this.$emit
context.emit('my-event',{data:1})
// 取所有传入slots,相当于vue2中的this.$slots
context.slots
}
<template>
<!-- 插值不用写.value -->
<h2>{{ counter }}</h2>
<button @click="increase">increase</button>
</template>
<script>
import {ref} from "vue";
export default {
name: 'HelloWorld',
setup() {
// 响应式变量,创建引用对象RefImpl
let counter = ref(0)
function increase() {
// 操作引用对象值
counter.value++
}
return {
counter,
increase
}
}
}
</script>
注,基本数据类型不要使用reactive
import {ref,reactive} from "vue";
...
setup() {
...
// 创建代理对象Proxy
const person = reactive({name:'psr',age:18}),
person1 = reactive({name:'zdd',age:18}
// 可以直接添加删除响应式属性,区别于vue2中的vc.$set vc.$delete方法
person.sex='男'
// 创建响应式数组
const persons = reactive([]);
persons.push(person)
// 索引修改也能支持响应式
persons[0]=person1
...
}
import {reactive, computed} from "vue"
...
setup() {
...
let person = reactive({
name: 'psr',
firstName: 'zhou',
lastName: 'dd',
// 简写
fullName: computed(() => {
return person.firstName + ' - ' + person.lastName
}),
age: '18'
})
// 完整
let fullName = computed({
get() {
return person.firstName + ' - ' + person.lastName
},
set(value) {
const nameArr = value.split(' - ')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
...
return {
...
person,
fullName,
...
}
}
import {watch} from 'vue'
watch(msg, (newValue, oldValue) => {
console.log(`msg changed: ${newValue} < ${oldValue}`)
}, { // 传递配置
immediate: true
})
watch([msg1, msg2], (newValue, oldValue) => {
// 不管哪个发生变化都会触发
console.log(`something changed, msg1: ${newValue[0]} < ${oldValue[0]}`)
console.log(`something changed, msg2: ${newValue[1]} < ${oldValue[1]}`)
})
- 监视reactive,
注1,此处无法正确获得oldValue
注2,强制开启深度监视,deep:false配置无效
```js
watch(person, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
watch(() => person.age, (newValue, oldValue) => {
console.log(`age changed: ${newValue} < ${oldValue}`)
})
watch([() => person.firstName, () => person.lastName], (newValue, oldValue) => {
console.log(`something changed, firstName: ${newValue[0]} < ${oldValue[0]}`)
console.log(`something changed, lastName: ${newValue[1]} < ${oldValue[1]}`)
})
watch(() => person.job, (newValue, oldValue) => {
console.log(newValue, oldValue)
}, {deep: true})
监视函数中依赖的属性发生变更时触发
// person.age或person.job.salary变化时就会调用此函数
watchEffect(()=>{
console.log("年龄:"+person.age)
console.log("薪资:"+person.job.salary)
})