两者皆可声明响应式数据，具体区别请参考注释。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">

        <h1>{{ msg }}</h1>
        <p>num:{{ num }}</p>
        <p>{{ web.title }}</p>
        <p>{{ web.url }}</p>


    </div>

    <script type="module">

        import {createApp,ref,reactive} from './vue.esm-browser.js'

        createApp({

            setup(){

                //ref 用于声明普通的响应式数据类型，如number,string还有array
                const num = ref(10)
                //ref的响应式数据修改值需要用var.value的形式来修改。
                num.value = 20

                //reactive 用于声明复杂的响应式数据，如obj
                const web = reactive({
                    title:'第三课',
                    url:'cn.vuejs.org'
                })

                //reactive 声明的数据类型可以直接修改值。obj.arg
                web.url = 'http://www.baidu.com'

                return {
                    msg:'hello vue',
                    num,
                    web
                }
            }

        }).mount("#app")

    </script>
</body>
</html>

课程地址：https://www.bilibili.com/video/BV1nV411Q7RX

标签: none

评论已关闭