vue3

最新推荐文章于 2024-03-06 12:36:20 发布

小磊Q前端

最新推荐文章于 2024-03-06 12:36:20 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/wangyl1995/article/details/103289337

版权

vue3最大的改变是双向数据绑定，以前是object.defineproperty,现在是Proxy

<!doctype html>
<html lang="`en`">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/vue.global.js"></script>
<script>
    //createApp:虚拟dom挂载在真实dom上，computed:计算属性，effect：hooks
    //react:effect(()=>{网络请求/dom操作/卸载})
    //reactive:响应,
    //createApp：虚拟-->真实dom computen:计算属性 也是个方法，返回值想要计算值得值
  const { reactive, computed, effect, watch, createApp } = Vue
  const App = {
    template: `
        <div id="box">
            <button @click="increment">按钮{{state.double}}</button>
            <h1>{{ state.count }}</h1>
        </div>
      `,
    // setup:data methods
    setup() {
      const state = reactive({
        count: 0,
        double:computed(()=>state.count*2)
      })
      increment=(e)=>{
        state.count++
      }
      effect(() => {
        console.log('count改变', state.count);
      })
      return {
        state,
        increment
      }
    }
  }
  createApp().mount(App, '#app')

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