vue3-快速上手（对比vue2）

入口文件的createApp

• 在vue2里面，是引入的Vue构造函数，在这里引入的是一个名为createApp的工厂函数
• 区别就是creatApp更“轻”
• 不能使用原来的方法使用，不能引入Vue【undefind】
• 组件可以没有根标签【有一个虚拟的fragment父标签，但是不参与渲染】

setup

• 理解：在vue3中的一个新配置项，值为一个函数
• 组件所用到的数据，方法都写在setup中【可以不用写data，method，mountd了】
• setup函数的两种返回值：
  • 若返回一个对象，那么里面的东西就可以在模板里面使用了【重点】
  • 若返回一个渲染函数（h），则可以自定义渲染内容【了解】
• 注意点：
  • 尽量不要与vue2中的配置项混用：比如不使用data，methods等等
    • setup不能是一个async函数，因为这样的话返回值是一个promise，而不是对象

ref函数：需要import {ref} from ‘vue’

• vue3中若想实现动态的更改数据【响应式】，就必须在用ref函数放置数据
  let name = ref(“xxx”)
• vue3中js里更改和读取数据，必须是数据.value
  name.value=‘yyy’
  理由：只有使用ref才能被vue监测到数据更新，然后ref把数据进行加工成一个对象，对象里面的value才是数据的值
  特点：
  • 在模板中可以直接使用数据，不用.value【因为自动做了特殊处理】
  • 基本数据类型的响应式靠的是Object.defineProperty()的get和set完成的
  • 对象类型的数据内部求助了Vue3中的新函数：reactive函数【具体操作了Proxy】
  • 对象修改：a.value.属性=‘xxx’ 【后面不需要在value了，原因是reactive使用Proxy】

reactive函数：需要import {ref} from ‘vue’

• vue3中若想实现动态的更改"对象"数据【响应式】，可以用reactive函数放置对象
  let person = reactive({xxx})
• 更改reactive处理的对象
  person.name=‘yyy’
  理由：其中内部原理使用了proxy，就不需要每次都.value
  特点：
  • 只能是对象和数组能用
  • 每次不许要.value
  • 可以深度监测的对象变化
  • 可以直接更改数组的值【vue2更改数组的值需要特定函数】

响应式原理

• 尚硅谷146p

vue2.0

实现原理：
* 对象类型：是通过Object.defineProperty()对属性的读取，修改进行拦截【数据劫持】
* 数组类型：是通过更改一系列数组的方法实现拦截
存在问题：
* 新增属性，删除属性，界面不更新
* 直接通过下标修改数组，界面不更新

vue3.0

实现原理：
* 通过Proxy(代理):拦截对象中任意属性的变化，包括属性的读写，添加删除
* 通过Reflect(反射):对被代理的对象进行操作【不容易报错】
与vue2.0的最大区别
* Object.defineProperty()不能监测对象的删除和增添，但是Proxy可以

setup详解

• setup执行是最早的，比beforeCreate还早，此时的this是undefind，所以很多方法都在setup的两个参数里面
• setup的参数
  • props：值为对象，包含逐渐外部传递过来的东西【父组件给的东西】
  • context：上下文对象
    • attrs：值为对象，有父组件给的东西，但是没有在props配置里面声明的数据【捡漏】
    • slots：收到的插槽类容，相当于this.$slots
    • emit: 触发自定义事件的函数相当于this.$emit

computed计算函数

• 功能与vue2中的computed一致
• 写法：
  • 先导入import {computed} from ‘vue’
  • 简写(只能读取)：
    • let fullName=computed(()=>{
      return a+b
      )
  • 完整写法:
    • let fullName=computed({
      get(){
      return a+b
      }
      set(value){
      value****
      }
    • })

watch监视函数 152p

• 功能跟vue2中的监视属性一致
• 使用：
  • 先导入import {watch} from ‘vue’
  • 书写方式：watch(变量,函数，配置)
    watch (person,(newValue,oldValue)=>{
    console.log(xxxx)
    )

watchEffect函数

• watch套路是：即要指明监视的属性，也要指明监视的回调
• watchEffect的套路是：不用指明那个属性，里面用到了什么，就可以监视什么【很牛逼】
• watchEffect有点像computed：
  • 但是computed计算出来的值要返回出来
  • 而watchEffect更注重过程，不用写返回值
    *用法：
  • 先导入：import ‘watchEffect’ from ‘vue’
  • watchEffect(()=>{
    const x1=name
    const x2=age
    console.log(“name或者age改变了”)
    })b

生命周期

• 功能跟vue2相同，也可以使用vue2的方法去使用生命周期钩子
• 在vue3中
  • beforeCreate和created没有对应的api，他们就是setup
  • beforeDestroy改名beforeUnmount destroyed改名unmounted
  • 然后其他大径相同的改名：mounted：onMounted

hook

类似于minx

toRef

• 创建一个ref对象，其value值指向另一个对象的属性【相当于指向地址】
• 语法：const name = toRef(person,‘name’)
• 应用：当要将响应式的对象中的摸个属性单独提供给外部使用的时候
• 扩展：toRefs和toRef的功能一直，但是可以批量创建多个ref对象
  • …toRefs(person) : 把通过toRefs处理的person对象解构出来【只能一层】

其他api

• shallowReactive 和 shallowRef：浅层次的响应式
• readonly 和 shallowReadonly ：只读
• toRaw 和 markRaw ：响应式变普通对象
• customRef： 自定义的ref
• provide 和 inject ：父向后代传递数据【子孙都可以】
• isRef,isReactive,isReadonly,isProxy :判断是否为ref，reactive等等对象

vue3新组件

• teleport ：可以把里面的内若传送到其他地方
  xxxx
• Suspense : 可以等待"异步组件"加载的时候呈现一些内容，增强用户体验
  • 组件的引入
    静态引入：import son from ‘./components/son’ :在组件完全加载之前，页面都不能显示
    动态引入(异步引入): import {defineAsyncComponent} from ‘vue’
    const son = defineAsyncComponent(()=>import(‘./components/son’)
    • 使用Suspense包裹组件，并且配置好default和fallback：因为Suspense准备好了两个插槽

<Suspense>
          <template v-slot:default> 
             <son/>
          </template>  
          <template v-slot:fallback> 
             <h2>加载中</h2>
          </template>  
      </Suspense>

全局的api转移

以前经常Vue.xxx，现在都可以app.xxx
并且在Vue原型对象上面绑定的时候，可以改变为app.config.globalProperties

• 这里要注意，由于在setup里面没有this，如何访问到绑定全局的原型呢？
• 首先import {getCurrentInstance} from ‘vue’
• const {proxy} = getCurrentInstance() 【注意这里一定要拿出proxy】
• proxy.$http 【这样就拿出来了】

相比vue2特殊改变

• data必须是一个函数
• 过度的名称改变 .v-enter-from,.v-enter-to
• 移除了@key.13，这种通过数字编码控制按键
• 去除了v-on.native，关于自定义事件的
• 移除了过滤器 filter