1, the actual operation of a simple project, reference links Nuggets last article ;
according to the above steps, download the code and the actual operation, during operation need to find the original text Vue.createApp().mount(App, '#app')was changed to Vue.createApp(App).mount('#app')the above modification has been submitted to GitHub: HTTPS: //github.com/pineappleok/vue-next ;
2. Two-way binding demo;
const {
reactive } = Vue
var App = {
template: `
<div class="container">
{
{message}}
<input v-model="name" />
<p>{
{name}}</p>
</div>`,
setup() {
const state = reactive({
message: 'Hello World!!!',
name: ''
})
return {
...state
}
}
}
Vue.createApp(App).mount('#app')
3. Sub-component props and context parameters;
const {
reactive } = Vue
let Child = {
// 属性定义
props: {
title: {
type: String,
default: ''
}
},
template: `<div>{
{title}}</div>`,
setup(props, context) {
console.log(props);
console.log(context);
}
}
let App = {
template: `
<div class="container">
{
{message}}
<input v-model="name" />
<p>{
{name}}</p>
<Child title="test props two arguments"/>
</div>`,
components: {
Child },
setup() {
const state = reactive({
message: 'Hello World!!!',
name: ''
})
return {
...state
}
}
}
Vue.createApp(App).mount('#app')
4. Counter demo, use of toRefs,
const {
reactive, toRefs } = Vue
let Child = {
// 属性定义
props: {
title: {
type: String,
default: ''
}
},
template: `<div>{
{title}}</div>`,
setup(props, context) {
console.log(props)
console.log(context)
}
}
let App = {
template: `
<div class="container">
{
{message}}
<input v-model="name" />
<p>{
{name}}</p>
<Child title="test props two arguments"/>
<h4>计数器 demo</h4>
count: {
{count}}
<button @click="handlerCountAdd"> Click ++ </button>
</div>`,
components: {
Child },
setup() {
const state = reactive({
message: 'Hello World!!!',
name: '',
count: 0
})
const handlerCountAdd = () => {
state.count++
}
return {
...toRefs(state),
handlerCountAdd
}
}
}
Vue.createApp(App).mount('#app')
Pay attention to the difference between the 2 two-way binding demo and the 4 counter demo. When the two-way binding demo, you don’t actually need to do toRefs for the name, but when you go to the counter demo, if you don’t do toRefs for the count, you can use the handlerCountAdd method. The count has been incremented in the latest state printed in, but the dom did not render the latest count, and the original value of count is still displayed as 0.
5. The introduction and use of computed-reverse string demo
const {
reactive, toRefs, ref, computed } = Vue
let Child = {
// 属性定义
props: {
title: {
type: String,
default: ''
}
},
template: `<div>{
{title}}</div>`,
setup(props, context) {
console.log(props)
console.log(context)
}
}
let App = {
template: `
<div class="container">
{
{message}}
<input v-model="name" />
<p>{
{name}}</p>
<Child title="test props two arguments"/>
<h4>计数器 demo</h4>
count: {
{count}}
<button @click="handlerCountAdd"> Click ++ </button>
<h4>ref使用:{
{refExample}}</h4>
<h4>反转字符串demo</h4>
<p>{
{name}}反转后为：{
{rName}}</p>
</div>`,
components: {
Child },
setup() {
const state = reactive({
message: 'Hello World!!!',
name: '',
count: 0,
rName: computed(() =>
state.name
.split('')
.reverse()
.join('')
)
})
const handlerCountAdd = () => {
state.count++
}
const refExample = ref('refExample')
return {
...toRefs(state),
handlerCountAdd,
refExample
}
}
}
Vue.createApp(App).mount('#app')
6. The use of watch, the monitor watch is a method, which contains 2 parameters, both of which are function
const {
reactive, toRefs, ref, computed, watch } = Vue
let Child = {
// 属性定义
props: {
title: {
type: String,
default: ''
}
},
template: `<div>{
{title}}</div>`,
setup(props, context) {
console.log(props)
console.log(context)
}
}
let App = {
template: `
<div class="container">
{
{message}}
<input v-model="name" />
<p>{
{name}}</p>
<Child title="test props two arguments"/>
<h4>计数器 demo</h4>
count: {
{count}}
<button @click="handlerCountAdd"> Click ++ </button>
<h4>ref使用:{
{refExample}}</h4>
<h4>反转字符串demo</h4>
<p>{
{name}}反转后为：{
{rName}}</p>
</div>`,
components: {
Child },
setup() {
const state = reactive({
message: 'Hello World!!!',
name: '',
count: 0,
rName: computed(() =>
state.name
.split('')
.reverse()
.join('')
),
countDouble: computed(() =>
state.count*2
),
countTriple: computed(() =>
state.count*3
),
countQuadruple: computed(() =>
state.count*4
),
})
const handlerCountAdd = () => {
state.count++
}
const refExample = ref('refExample')
watch(() => [state.count, state.countDouble, state.countTriple, state.countQuadruple], (val, preVal) => {
console.log('watch val==', val);
console.log('watch preVal==', preVal);
})
return {
...toRefs(state),
handlerCountAdd,
refExample
}
}
}
Vue.createApp(App).mount('#app')