vue3笔记1 组件配置API

// 引入工厂函数，而非Vue构造函数
import {createApp} from 'vue'
import App from './App.vue'

// 创建应用实例对象，比Vue实例轻
const app = createApp(App)
// 挂载
app.mount('#app')

<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>

<script>
// 引入渲染函数
import {h} from 'vue'
export default {
	setup(){
		return ()=> { return h('h1','hello') }
	}
}
</script>

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>

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)
})