10个实例小练习，快速入门熟练 Vue3 核心新特性(一)

ztj100 2024-12-29 07:21 29 浏览 0 评论

作者：xuying 全栈修炼

转发链接：https://mp.weixin.qq.com/s/_n2seDbbiO5hXQfuUGbUCQ

前言

Vue3.0 发 beta 版都有一段时间了，正式版也不远了，所以真的要学习一下 Vue3.0 的语法了。本篇文章总共分两部分，望小伙伴们认真阅读。

环境搭建

$ git pull https://github.com/vuejs/vue-next.git
$ cd vue-next && yarn

下载完成之后打开代码，开启 sourceMap :

tsconfig.json 把 sourceMap 字段修改为 true: "sourceMap": true
rollup.config.js 在 rollup.config.js 中，手动键入：output.sourcemap = true
生成 vue 全局的文件：yarn dev
在根目录创建一个 demo 目录用于存放示例代码，并在 demo 目录下创建 html 文件，引入构建后的 vue 文件

api 的使用都是很简单的，下文的内容，看例子代码就能懂了的，所以下面的例子不会做过多解释。

reactive

reactive: 创建响应式数据对象

setup 函数是个新的入口函数，相当于 vue2.x 中 beforeCreate 和 created，在 beforeCreate 之后 created 之前执行。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello Vue3.0</title>
    <style>        body,
        #app {
            text-align: center;
            padding: 30px;
        }
    </style>
    <script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
    <h3>reactive</h3>
    <div id='app'></div>
</body>
<script>    const { createApp, reactive } = Vue
    const App = {
        template: `
            <button @click='click'>reverse</button> 
            <div style="margin-top: 20px">{{ state.message }}</div>
        `,
        setup() {
            console.log('setup ');

            const state = reactive({
                message: 'Hello Vue3!!'
            })

            click = () => {
                state.message = state.message.split('').reverse().join('')
            }

            return {
                state,
                click
            }
        }
    }
    createApp(App).mount('#app')</script>
</html>

ref & isRef

ref : 创建一个响应式的数据对象 isRef : 检查值是否是 ref 的引用对象。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello Vue3.0</title>
    <style>        body,
        #app {
            text-align: center;
            padding: 30px;
        }
    </style>
    <script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
    <h3>ref & isRef</h3>
    <div id='app'></div>
</body>
<script>    const { createApp, reactive, ref, isRef } = Vue
    const App = {
        template: `
            <button @click='click'>count++</button> 
            <div style="margin-top: 20px">{{ count }}</div>
        `,
        setup() {
            const count = ref(0);
            console.log("count.value：", count.value)  // 0

            count.value++
            console.log("count.value：", count.value)  // 1

            // 判断某值是否是响应式类型
            console.log('count is ref:', isRef(count))

            click = () => {
                count.value++;
                console.log("click count.value：", count.value) 
            }

            return {
                count,
                click,
            }
        }
    }
    createApp(App).mount('#app')</script>
</html>

Template Refs

使用 Composition API 时，反应性引用和模板引用的概念是统一的。

为了获得对模板中元素或组件实例的引用，我们可以像往常一样声明 ref 并从 setup() 返回。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello Vue3.0</title>
    <style>        body,
        #app {
            text-align: center;
            padding: 30px;
        }
    </style>
    <script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
    <h3>Template Refs</h3>
    <div id='app'></div>
</body>
<script>    const { createApp, reactive, ref, isRef, toRefs, onMounted, onBeforeUpdate } = Vue
    const App = {
        template: `
            <button @click='click'>count++</button> 
            <div ref="count" style="margin-top: 20px">{{ count }}</div>
        `,
        setup() {
            const count = ref(null);

            onMounted(() => {
                // the DOM element will be assigned to the ref after initial render
                console.log(count.value) // <div/>
            })

            click = () => {
                count.value++;
                console.log("click count.value：", count.value) 
            }

            return {
                count,
                click
            }
        }
    }
    
    createApp(App).mount('#app')</script>
</html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello Vue3.0</title>
    <style>        body,
        #app {
            text-align: center;
            padding: 30px;
        }
    </style>
    <script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
    <h3>Template Refs</h3>
    <div id='app'></div>
</body>
<script>    const { createApp, reactive, ref, isRef, toRefs, onMounted, onBeforeUpdate } = Vue
    const App = {
        template: `
            <div v-for="(item, i) in list" :ref="el => { divs[i] = el }">
                {{ item }}
            </div>
        `,
        setup() {
            const list = reactive([1, 2, 3])
            const divs = ref([])

            // make sure to reset the refs before each update
            onBeforeUpdate(() => {
                divs.value = []
            })

            onMounted(() => {
                // the DOM element will be assigned to the ref after initial render
                console.log(divs.value) // [<div/>]
            })

            return {
                list,
                divs
            }
        }
    }
    
    createApp(App).mount('#app')</script>
</html>

toRefs

toRefs : 将响应式数据对象转换为单一响应式对象

将一个 reactive 代理对象打平，转换为 ref 代理对象，使得对象的属性可以直接在 template 上使用。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello Vue3.0</title>
    <style>        body,
        #app {
            text-align: center;
            padding: 30px;
        }
    </style>
    <script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
    <h3>toRefs</h3>
    <div id='app'></div>
</body>
<script>    const { createApp, reactive, ref, isRef, toRefs } = Vue
    const App = {
        // template: `
        //     <button @click='click'>reverse</button> 
        //     <div style="margin-top: 20px">{{ state.message }}</div>
        // `,
        // setup() {
        //     const state = reactive({
        //         message: 'Hello Vue3.0!!'
        //     })

        //     click = () => {
        //         state.message = state.message.split('').reverse().join('')
        //         console.log('state.message: ', state.message)
        //     }

        //     return {
        //         state,
        //         click
        //     }
        // }

        template: `
            <button @click='click'>count++</button> 
            <div style="margin-top: 20px">{{ message }}</div>
        `,
        setup() {
            const state = reactive({
                message: 'Hello Vue3.0!!'
            })

            click = () => {
                state.message = state.message.split('').reverse().join('')
                console.log('state.message: ', state.message)
            }

            return {
                click,
                ...toRefs(state)
            }
        }
    }
    createApp(App).mount('#app')</script>
</html>

computed

computed : 创建计算属性

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello Vue3.0</title>
    <style>        body,
        #app {
            text-align: center;
            padding: 30px;
        }
    </style>
    <script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
    <h3>computed</h3>
    <div id='app'></div>
</body>
<script>    const { createApp, reactive, ref, computed } = Vue
    const App = {
        template: `
            <button @click='handleClick'>count++</button> 
            <div style="margin-top: 20px">{{ count }}</div>
        `,
        setup() {
            const refData = ref(0);

            const count = computed(()=>{
                return refData.value; 
            })

            const handleClick = () =>{
                refData.value += 1 // 要修改 count 的依赖项 refData
            }

            console.log("refData:" , refData)

            return {
                count,
                handleClick
            }
        }
    }
    createApp(App).mount('#app')</script>
</html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello Vue3.0</title>
    <style>        body,
        #app {
            text-align: center;
            padding: 30px;
        }
    </style>
    <script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
    <h3>computed</h3>
    <div id='app'></div>
</body>
<script>    const { createApp, reactive, ref, computed } = Vue
    const App = {
        template: `
            <button @click='handleClick'>count++</button> 
            <div style="margin-top: 20px">{{ count }}</div>
        `,
        setup() {
            const refData = ref(0);

            const count = computed({
                get(){
                    return refData.value;
                },
                set(value){
                    console.log("value:", value)
                    refData.value = value; 
                }
            })

            const handleClick = () =>{
                count.value += 1 // 直接修改 count
            }

            console.log(refData)

            return {
                count, 
                handleClick
            }
        }
    }
    createApp(App).mount('#app')</script>
</html>

最后

本文只列出了笔者觉得会用得非常多的 api，Vue3.0 里面还有不少新特性的，比如 customRef、markRaw ，如果读者有兴趣可看 Vue Composition API 文档。

Vue Composition API 文档: https://composition-api.vuejs.org/api.html#setup
vue-next 地址: https://github.com/vuejs/vue-next

本篇文章未完结，请查看下一篇。

10个实例小练习，快速入门熟练 Vue3 核心新特性(一)

前言

环境搭建

reactive

ref & isRef

Template Refs

toRefs

computed

最后

推荐Vue学习资料文章：

相关推荐

取消回复欢迎你发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

如何快速切换node版本?利用n包快速切换nodejs版本

如何发个 npm 包?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

【Python机器学习系列】建立多层感知机模型预测心脏疾病

详解MySQL 字符串拼接之concat\concat_ws\group_concat

让Jenkins自动部署你的Vue项目「实践」

10个实例小练习，快速入门熟练 Vue3 核心新特性(一)

前言

环境搭建

reactive

ref & isRef

Template Refs

toRefs

computed

最后

推荐Vue学习资料文章：

相关推荐

取消回复欢迎 你 发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

如何快速切换node版本?利用n包快速切换nodejs版本

如何发个 npm 包?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

【Python机器学习系列】建立多层感知机模型预测心脏疾病

详解MySQL 字符串拼接之concat\concat_ws\group_concat

让Jenkins自动部署你的Vue项目「实践」

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起