vue3和vue2的对比

访问全局的变量方法

    app.config.globalProperties.$https 
    const { ctx } = getCurrentInstance()

1. 加载异步组件

//vue3 通过defineAsyncComponent加载异步组件
const Child = defineAsyncComponent(() => import('./Child'))
//vue2 加载异步组件
const Child = () => import(/* webpackChunkName: "Child" */'./Child')
//通过/* webpackChunkName: "Child" */给webpack打包生成对应的包名
//vue3路由中可以用原始的方法() => import(/* webpackChunkName: "Child" */'./Child')

2. vue3新增 suspense在组件引用的地方，给组件加上loading效果

  <suspense>
    <template #default>
      <Child v-if="isChild" />
    </template>
    <template #fallback>
      <div>
        Loading...
      </div>
    </template>
  </suspense>

• 子组件模板的方式

//子组件
  async setup() {
    const testPro = () => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(reactive({
            name: 'AAA',
            city: '成都'
          }))
        }, 2000);
      })  
    }
    const data = await testPro()
    return {
      ...toRefs(data)
    }
  },

• 子组件jsx的方式

  async setup() {
    const isShow = ref(true)
    const data = reactive({
      age: 22
    })

    let data2 = reactive({name: 'AAA'})
    const testPro = () => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(reactive({
            name: '蔡博cccc',
            city: '成都'
          }))
        }, 500);
      })  
    }

    const dataX = await testPro()
    data2.name =dataX.name
    console.log("s", dataX)

    return () => {
      return (
        <>
          <div>测试jsx异步加载</div>
          <div>{data.age}</div>
          <div>{data2.name}</div>
          {
            isShow.value ? <Child3 /> : null
          }
        </>
      )
    }
  }

3. vue3中使用provide, inject，watchEffect

import { getCurrentInstance, provide, inject } from 'vue'
setup () {
    provide('user', {
      city: '成都',
      age: 22
    })
}
setup () {
    const injectData = inject('user')
}
//1.watchEffect 接受第二个参数{ flush: 'post' }
//2.当dom更新后，才执行副作用，相当于是获取到最新的dom
//3.watchEffect 返回一个函数，当执行这个函数的时候，停止监听副作用
/* 测试深度监听 */
//在监听的值改变之前，执行一些操作onInvalidate
watchEffect((onInvalidate) => {
    console.log('测试深度监听', objData.obj.name)
    onInvalidate(() => {
        console.log('取消一些操作')
    })
})

动态变量导入css

color: v-bind(color);

css-module的方式，防止全局变量污染

在vue.config.js中配置requireModuleExtension

• requireModuleExtension默认为true，当为true时，需要css文件前加上前缀.[module].scss；只有这样的文件，才能是css-module的方式 import style from './test.module.scss'; 当requireModuleExtension默认为true设置为false时，默认所有的css文件都可以作为css-module的方式
• 引入方式

css: {
    requireModuleExtension: false
}

• 使用

<div class={style.name}></div>

• 使用css-module主要场所，是在jsx的语法中

vue3想通过ref获取子组件的方法

  setup (props, { expose }) {
    const observed = reactive({
      a: 1
    })


    function clickChild (value) {
      observed.a = value
    }

    expose({ //向父组件暴露子组件的方法，供父组件调用
      clickChild
    })

    return {
      observed,
      expose//通过return也可以暴露，但一般不这样做，这样绑定到组件实例上了，官方推荐用expose
    }
  }
  //绑定的ref和reactive的值，也可以绑定到expose中，在父组件可以去修改它的值