Silentdoer

导航

Vue3.0随记

0.vue3里不要用reactive了，就用ref，reactive据说解构后会丢失响应性；

1.Vue3.0中的const {ref, computed} = Vue;里的ref之类的是来自runtime-core/src/index.ts的导出；而这些内容又分别来自@vue/reactivity ./apiComputed之类的；

2.使用例子：

<html lang="zh">
    <head>
        <meta charset="UTF-8"/>
        <!-- 注意这句话的意思类似C++的include，即将整个文件包含进来 -->
        <script src="../vue.global.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <template id="root">
            <div>
                <p>是解放路口</p>
                <p>{{msg}}</p>
                <input v-model="msg"/>
                <p>{{count}}</p>
                <!-- TODO 原来如此，只要是有经过vue处理的，无论是方法
                {{}}还是其他的指令之类的，里面的参数啥的都是可以直接从vue里获取
                ，所以这里count获取的就是vue里的数据
                ，如果把@click换成标准的onclick则获取不到count值（假设全局也有add方法） -->
                <!-- vue里方法绑定时可以写add也可以写add(..)，angular则必须add(..)-->
                <button @click="add(count)">add</button>
                <!-- 也可以这么写，尽管方法里没有参数（外部有没有参数过来不管，我decrease不用）-->
                <button @click="decrease($event)">decrease</button>
                <ul>
                    <!-- 注意这里@dblclick="lala(item)"应该理解
                    为  调用绑定 方法，而非声明绑定方法，只不过这里是延时调用
                    或说是需要手动触发调用，item是实参而非形参
                    ，你把item换成常量就好理解了，比如lala(4) -->
                    <li v-for="item of list" @dblclick="laa(item)">
                        {{item}}
                    </li>
                </ul>
            </div>
        </template>
    </body>
    <!-- 这里不管是不是module都能用上面包含进来的Vue -->
    <!-- type是module只是说里面可以用import来将其他代码包含进来，
    但是最终这些代码仍然是全都在这个页面里，但是module里import的只是在这个module里使用，其他作用域是看不到的 -->
    <script type="module">
        /* window.add = function add(params) {
            alert('sfjkl' + params);
        } */
        // 如果不这样解构赋值，也可以直接Vue.ref('...');来使用
        const {createApp, ref} = Vue;
        const root = {
            template: '#root',
            setup() {
                console.log('sfjkl888');
                const msg = ref('是否健康了');
                let state = Vue.reactive({count: 0});
                let list = ref([0, 2, 4]);
                return {
                    msg,
                    // toRefs只能用于HTML里可以不加state.，但是对于js里还是需要的
                    // 其实js里也不需要，需要是因为没用this，因此需要通过闭包的形式
                    // 来获取count，所以要定义state，然后state.count，但是
                    // 可以不用state直接在toRefs里弄一个JSON对象然后其他地方this.count也行
                    // 但是和vue2一样，用this的话不能用箭头表达式，因为无法绑定this到组件/vue对象
                    // 比如add是箭头表达式，如果里面用了this，则add里面的this无法引用msg
                    ...Vue.toRefs(state),
                    list,
                    decrease: function(/*这里隐式有个this参数*/) {
                        this.count--;
                    },
                    laa(item) {
                        // 注意，laa属于这个匿名JSON对象，所以它的this绑定到了这个JSON对象
                        // 而add是箭头表达式，它无法绑定内部的this为其外部对象
                        // 箭头表达式的this只适用这种情况this.list.forEach(()=>{this.a})
                        // 或是this.kk = () => {this.a}
                        alert('水电费' + item + this.msg);
                    },
                    /*箭头函数隐式没有this参数，内部的this其实是闭包捕获的变量，
                    当外部没有this变量时（因为它不属于被调用的情况，而是处于声明期间，因此
                    没有this可以捕获，所以这里捕获的this变量没有，因此值是undefined*/
                    add: (event) => {
                        state.count++;
                        alert(JSON.stringify(event) + '###' + (this === undefined));
                    }
                }
            }
        }
        createApp(root).mount('#app');
    </script>
</html>

 

posted on 2020-04-28 09:32  Silentdoer  阅读(217)  评论(0)  编辑  收藏  举报