VUE3特性:
1.const 声明变量
特性:声明为一个常量,不能被修改,不可以再次赋值,它的指向是不可以改变的,只能指向某处固定区域,不能再指向其它地方
要求:
① 声明后必须初始化赋值,如:const name=‘aaa’,不可以 const name;
② 常量的含义是指向的对象不能修改,但是可以修改对象中的属性
所以类似
const userName = ref('张三')
userName.value = '李四'
实际上是在给对象userName的属性重新赋值
2.reactive和ref
都是用作定义基本变量的
ref 定义简单的变量,reactive一般定义数组和对象
ref 有.value属性,reactive没有
reactive和ref使用示例代码:
<template>
<div>
<p>Text: {{ text }}</p>
<p>Count: {{ count }}</p>
</div>
<button @click="increment">+</button>
<button @click="reduce">-</button>
</template>
<script>
import { reactive, ref } from 'vue'
export default {
setup() {
// 使用 ref 函数创建响应式数据
var text = ref("这是一个demo")
const count = ref(0)
console.log('ref(text)------------', text)
console.log('ref(0)------------', count)
// 使用 reactive 函数创建响应式对象
const state = reactive({
message: 'Hello, Vue 3!'
})
const arr = reactive([
1,2,3,4,5,6,7,8
])
const obj = reactive({
name: 'demo',
age: 1
})
console.log('reactive1------------', arr, arr[0])
console.log('reactive2------------', obj, obj.name, obj.age)
// 定义自定义的方法
function increment() {
count.value++
text.value += count.value
}
function reduce(){
count.value--
text.value += count.value
}
// 返回需要在模板中使用的数据和方法
return {
text,
count,
state,
increment,
reduce
}
}
}
</script>
3.provide与inject
不用再一层一层的传递数据
provide可以向所有子孙组件提供数据以及提供修改数据的方法,子孙组件用inject使用数据。
provide与inject使用示例代码:
父页面:
<template>
<div>
<p>Parent component</p>
<p>Message: {{ state.message }}</p>
<button @click="changeMessage()">Change Message</button>
<ChildComponent />
</div>
</template>
<script>
import { provide, reactive } from 'vue'
import ChildComponent from './ChildComponent.vue'
export default {
name: "ParentComponent",
components: {
ChildComponent
},
setup() {
const state = reactive({
message: 'Hello from parent component!'
})
function changeMessage() {
state.message = 'Message updated!'
}
// 在父组件中通过 provide 提供数据给子页面
provide('messageData', state)
// 定义父页面的方法
function parentMethod() {
alert('Parent method called!')
}
// 使用 provide 提供父页面的方法
provide('parentMethod', parentMethod)
return {
state: state,
changeMessage
}
}
}
</script>
<style scoped>
</style>
</script>
子页面:
<template>
<div>
<p>Child component</p>
<p>Message: {{ message }}</p>
<button @click="callParentMethod()">Call Parent Method</button>
</div>
</template>
<script>
import { provide, reactive,inject } from 'vue'
export default {
name: "ChildComponent",
components: {
},
setup() {
// 在子组件通过 inject 接收父组件提供的数据
const messageData = inject('messageData')
//调用父页面分
const parentMethod = inject('parentMethod')
function callParentMethod() {
parentMethod()
}
return {
message: messageData.message,
callParentMethod
}
}
}
</script>
<style scoped>
</style>