解构语法,用起来舒服多了!
例如下面的html页面使用vue3的例子,state变量下的message、num、input1都可以直接使用。
而不需要使用state.message、state.num、state.input这样的写法。
另外文中的v-cloak,是解决屏幕闪动的问题,大型的项目一般都是挂载,都不会使用这个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue3</title>
<style>
[v-cloak] {
display: none !important;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div>
{{ state1 }}
</div>
<div>
{{ message }}
</div>
<div>
{{ num }}
</div>
<input type="text" name="" id="" placeholder="输入" v-model="input1"><br/>
<input type="text" name="" id="" placeholder="输入" v-model="input2"><br/>
<div>
input1:{{ input1 }}
</div>
<div>
input2:{{ input2 }}
</div>
<button @click="btn1">
点我
</button>
</div>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.global.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.global.prod.js"></script>
<script>
const { createApp, reactive, toRefs, ref, onMounted } = Vue;
const app = createApp({
setup() {
var state1 = ref(123)
var input2 = ref(123)
const state = reactive({
message: 12,
num: 1,
input1: ''
})
onMounted(()=>{
console.log(2222)
})
const btn1 = () => {
console.log(state1)
console.log(input2)
console.log(state)
state1.value++
state.num++
}
return {
...toRefs(state),
state1,
input2,
btn1
}
}
});
app.mount("#app");
</script>
</body>
</html>