vue3学习笔记

222 阅读1分钟

main.js

        import { createApp } from 'vue'
        import App from './App.vue'
        
        createApp(App).mount("#app)
    

vue与react区别

image.png

不同点

  • vue双向数据流,react单项数据流
  • 设置状态vue直接修改,,react通过setState()

区别

  • 提供api方式
  • 全局定义
  • setup
  • hooks 、 mixin
  • ref、reactive定义数据
  • 响应式原理
  • 生命周期写法

App.vue

    可以没有根标签

Composition Api 组合式Api

setup

    vue3新配置项,值是一个函数
    
    两种返回值
    1.对象包含数据、方法
    3.渲染函数,需要引入h函数
    
    注意点:
    尽量不要vue2语法和vue3语法一起用,
    vue2中可以访问vue中属性,方法,
    vue3中访问不到vue2的
    同名以vue3为主

ref

image.png

reactive

image.png

vue3响应式原理

image.png

image.png

image.png

生命周期

image.png

toRef 很重要

image.png

其他不很重要Api

image.png

image.png

image.png

后代传递数据

image.png

image.png

image.png

vue2与vue3区别

image.png

image.png

image.png

image.png