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>