Download the vue – next

• Making the download
• Installation dependency: YARN or NPM install
• Yarn dev generatedpackages\vue\dist\vue.global.jsfileCopy this file and you’re ready to play

setup

The setup Composition API entry point is called before the beforeCreate is mounted to return an object, The properties on this object are incorporated into the rendering context of the component template (similar to proxy(VM,_data, key) in 2.0) and can also return a render function

parameter

Subsequent updates

The return value

setup() {
      const count = ref(0)
      const object = reactive({ foo: 'bar' })

      return {
        count,
        object
      }

      or 
      
      return (a)= > h('div', [object .foo, count .value])
    }
Copy the code

reactive

Reactive data is similar to the previous data

<div id="app">
    <span>{{ state.count }}</span>
</div>
Copy the code

const { reactive, createApp } = Vue

// Create and mount
createApp({
    const state = reactive({
        count: 0
    })

    setup: (a)= > {
        return {
            state
        }
    }
}).mount('#app')
Copy the code

watchEffect

Similar to Watch, this method will run automatically once when the dependent data changes

<div id="app">
    <span>{{ state.count }}</span>
    <br />
    <p id="print"></p>
    <button @click='handleAdd'>Add</button>
</div>
Copy the code

const { reactive, createApp, watchEffect, computed } = Vue

// Create and mount
createApp({

      // Reactive data
        // Similar to the previous data
        const state = reactive({
            count: 0
        })

        // Similar to watch
        // Execute this method when the dependent data changes
        // Will automatically run once
        watchEffect((a)= > {
            console.log('watchEffct')
            document.querySelector('#print').innerHTML = `count is ${state.count}`
        })

        // // Listen to multiple
        const stop = watchEffect((a)= > {
            console.log(`count is ${state.count}`)
        })
    setup: (a)= > {
        return {
            state,
            // method
            handleAdd: (a)= > {
                state.count++
                
                if (state.count === 3) stop()
            }
        }
    }
}).mount('#app')
Copy the code

computed

<div id="app">
    <span>{{ state.count }}</span>
    <br />
    <p id="print"></p>
    <span>{{ `double ${double}` }}</span>
    <br />
    <button @click='handleAdd'>Add</button>
</div>
Copy the code

const { reactive, createApp, computed } = Vue

// Create and mount
createApp({
    setup: (a)= > {
        // Reactive data
        // Similar to the previous data
        const state = reactive({
            count: 0
        })

        return {
            state,
            // computed
            // function form
            double: computed((a)= > state.count * 2),
            // or
            // get set
            //double: computed({
            // get() { return state.count * 2 },
            // set(value) { state.count = value }
            // })
            // method
            handleAdd: (a)= > {
                state.count++
                // double.value++ 
            }
        }
    }
}).mount('#app')
Copy the code

Ref reference

Unlike the previous ref, which is a reference to a component instance or A DOM node, the new version passes in a value and returns a responsive object

<div id="app">
    <! -- Automatically read the value attribute when used -->
    <span>{{ num }}</span>
    <br />
    <button @click='handleAdd'>Add</button>
</div>
Copy the code

const { reactive, createApp, ref } = Vue

// Create and mount
createApp({
    setup: (a)= > {
      {value: 100}
      const num = ref(100)

        return {
            num,
            // method
            handleAdd: (a)= > {
                // The value property must be changed when setting a value
                num.value++
            }
        }
    }
}).mount('#app')
Copy the code

readonly

<div id="app">
    <span>{{ state.count }}</span>
    <br />
    <button @click='handleAdd'>Add</button>
</div>
Copy the code

createApp({
    setup() {
        const state = readonly(reactive({
            count: 1
        }))
        const handleAdd = (a)= > {
            state.count++
        }

        return {
            state,
            handleAdd
        }
    }
}).mount('#app')
Copy the code

watch

With the Vue. $watch equivalent

<div id="app">
    <span>{{ state.count }}</span>
    <br />
    <button @click='handleAdd'>Add</button>
</div>
Copy the code

createApp({
    setup() {
        const state = reactive({
            count: 1
        })
        const num = ref(0)
        const handleAdd = (a)= > {
            state.count++
            num.value++
        }

        // The first argument is the object to listen on
        // The second argument callback function

        // Observe a value
        watch((a)= > state.count, (count, preCount) => {
            console.log('count:')
            console.log(count)
            console.log('preCount')
            console.log(preCount)
        })

        // we can also observe ref
        watch(num, (count, preCount) => {
            console.log('count:')
            console.log(count)
            console.log('preCount')
            console.log(preCount)
        })

        // Observe multiple values
        watch([(a)= > state.count, num], (count, preCount) => {
            console.log('count:')
            console.log(count)
            console.log('preCount')
            console.log(preCount)
        })

        return {
            state,
            handleAdd
        }
    }
}).mount('#app')
Copy the code

Post to recommend

• Proxy is an alternative to Object. DefineProperty in Vue3.0
• Figure out a prototype, a prototype object, a prototype chain
• Promise Principles = Build a Promise from 0 to 1

[Notes are not easy, if it is helpful to you, please like, thank you]