vite环境搭建
https://githubcom/vitejs/vite

yarn create vite-app hello-vite
cd hello-vite
yarn 安装包
yarn dev 启动
生命周期

  beforeCreate->setup
  created->setup
  beforeMount->onBeforeMount
  mounted->onMounted
  beforeUpdate->onBeforeUpdate
  updated->onUpdate
  beforeDetroy->onBeforeDetroy
  destroyed->onUnmounted
  errorCaptured->onErrorCaptured

声明改变

  //vue2
  letapp=new Vue({
    el:xxx,
 })
//vue3
 let {create}=Vue;
  create(Vue).mount("#app");

setup
vue3使用setup定义入口，所有定义和执行逻辑都在其内部执行
setup第一个参数未props
setup在组件创建时调用，代替了2的create和beforecreate
this发生改变，原来在Vue对象内部，this为vue，但是现在在setup里面，this可能时window或者undefined，和函数运行时有关
computed
computed,vue2是定义在外部，vue3是在setup内定义，在数据上追加

//vue3基本用法示例
 const {reactive,computed}=Vue;
const App={
    template:`<div>{{state.count}}</div>`,
    setup(){
       const state=reactive({
          count:0,
          double:computed(()=>state.count*2);
      })
  };
function increment(){
   state.count++
}
return {state,increment}
}

第一个例子

 <template>
    <div>Hello</div>
  <h1>x:{{position.x}}y:{{position.y}}</h1>
</template>
<script>
export default{
  name:'App',
  setup(){
     const position=reactive({}) //reactive 数据模型转换成响应式模型
    window.addEventListener("mouseover",(e)=>{
        console.log("mouseover",e.pageX,e.pageY)
       position.x=e.pageX
       position.y=e.pageY
  })
return {position}
  }
}
</script>