vue 3.0 —— 之初体验一

1,392 阅读2分钟

下载 vue-next

  • github 中下载
  • 安装依赖:yarn or npm install
  • yarn dev 生成 packages\vue\dist\vue.global.js 文件 复制出这个文件,就可以开始体验了

setup

setup Composition API的入口点 在beforeCreate挂接之前被调用 返回一个对象,则该对象上的属性将合并到组件模板的渲染上下文中(类似2.0中 proxy(vm,_data, key)) 还可以返回一个render函数

参数

后续更新

返回值

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

      return {
        count,
        object
      }

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

reactive

响应式数据 类似之前的 data

<div id="app">
    <span>{{ state.count }}</span>
</div>
const { reactive, createApp } = Vue

// 创建、挂载
createApp({
    const state = reactive({
        count: 0
    })

    setup: () => {
        return {
            state
        }
    }
}).mount('#app')

运行结果

watchEffect

类似于 watch 当依赖的数据发生变化时,执行该方法 会自动运行一次

<div id="app">
    <span>{{ state.count }}</span>
    <br />
    <p id="print"></p>
    <button @click='handleAdd'>Add</button>
</div>
const { reactive, createApp, watchEffect, computed } = Vue

// 创建、挂载
createApp({

      // 响应式数据
        // 类似之前的 data 
        const state = reactive({
            count: 0
        })

        // 类似于 watch
        // 当依赖的数据发生变化时,执行该方法
        // 会自动运行一次
        watchEffect(() => {
            console.log('watchEffct')
            document.querySelector('#print').innerHTML = `count is ${state.count}`
        })

        // // 监听多个
        const stop = watchEffect(() => {
            console.log(`count is ${state.count}`)
        })
    setup: () => {
        return {
            state,
            // method
            handleAdd: () => {
                state.count++
                
                if (state.count === 3) stop()
            }
        }
    }
}).mount('#app')

运行结果

computed

<div id="app">
    <span>{{ state.count }}</span>
    <br />
    <p id="print"></p>
    <span>{{ `double ${double}` }}</span>
    <br />
    <button @click='handleAdd'>Add</button>
</div>
const { reactive, createApp, computed } = Vue

// 创建、挂载
createApp({
    setup: () => {
        // 响应式数据
        // 类似之前的 data 
        const state = reactive({
            count: 0
        })

        return {
            state,
            // computed
            // 函数形式
            double: computed(() => state.count * 2),
            // or
            // get set 形式
            //double: computed({
            //     get() { return state.count * 2 },
            //    set(value) { state.count = value }
            // })
            // method
            handleAdd: () => {
                state.count++
                // double.value++ 
            }
        }
    }
}).mount('#app')

运行结果

ref 引用

不同于之前的 ref 老版本是组件实例的引用 or dom 节点 新版传入一个值返回一个响应式的对象

<div id="app">
    <!-- 使用时 自动读取 value 属性 -->
    <span>{{ num }}</span>
    <br />
    <button @click='handleAdd'>Add</button>
</div>
const { reactive, createApp, ref } = Vue

// 创建、挂载
createApp({
    setup: () => {
      // 返回一个 { value: 100 }
      const num = ref(100)

        return {
            num,
            // method
            handleAdd: () => {
                // 设置值时  必须改变 value 属性
                num.value++
            }
        }
    }
}).mount('#app')

运行结果

readonly

<div id="app">
    <span>{{ state.count }}</span>
    <br />
    <button @click='handleAdd'>Add</button>
</div>
createApp({
    setup() {
        const state = readonly(reactive({
            count: 1
        }))
        const handleAdd = () => {
            state.count++
        }

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

运行结果

watch

与 Vue.$watch 等效

<div id="app">
    <span>{{ state.count }}</span>
    <br />
    <button @click='handleAdd'>Add</button>
</div>
createApp({
    setup() {
        const state = reactive({
            count: 1
        })
        const num = ref(0)
        const handleAdd = () => {
            state.count++
            num.value++
        }

        // 第一参数需要监听的对象 
        // 第二个参数回调函数

        // 观察一个值
        watch(() => state.count, (count, preCount) => {
            console.log('count:')
            console.log(count)
            console.log('preCount')
            console.log(preCount)
        })

        // 还可以观察 ref
        watch(num, (count, preCount) => {
            console.log('count:')
            console.log(count)
            console.log('preCount')
            console.log(preCount)
        })

        // 观察多个值
        watch([() => state.count, num], (count, preCount) => {
            console.log('count:')
            console.log(count)
            console.log('preCount')
            console.log(preCount)
        })

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

运行结果

博文推荐

【笔记不易,如对您有帮助,请点赞,谢谢】