v3-cli

1.基本语法

1.在vue3中想用什么方法的话都需要从vue核心文件中使用import进行导入；

例如ref、reactive，onBeforeMounted等;setup不用从vue中进行导入；

2.在router的index.js中可以更改历史模式和哈希模式；且createRouter, createWebHistory,createWebHashHistory、useRouter等方法也要从vue-router中进性导入；

3.watch事件监听是从vue中进行导入，在setup函数中直接使用；

4.setup中useRouter是获取全局路由器对象；useRoute是获取当前的路由对象；

5. 更改ref定义的变量，在js中需要使用变量.value 进行更改；reactive定义的数组或者对象直接使用=赋值不会有响应式特点，数组可以使用push和...数组展开符，对象一样；

6.vue2定义全局属性:使用Vue.prototype.$http (属性名) = axios(数据);

vue3定义全局属性：app.config.globalProperties.$http = axios;

7.vue2是keep-alive或者transition包裹router-view标签对，而vue3是反过来；

2.组件间传输数据

在setup函数外还有components、props等字段；

components是在使用import导入组件之后，然后注册组件的字段；

props是用来接受父组件传递过来的数据的字段；

 3.setup语法糖

0 .直接在script标签对上加上setup属性，即可不用再export default导出。也不需要return；

setup语法糖中使用props和emit

1. defineProps获取传递过来的属性，参数是数组结构,数组元素是传递的属性名；使用的时候使用props.属性名；

2. defineEmits用来自定义事件发射， 相当于组件化中emits(['自定义事件名'])注册自定义事件；在事件绑定的函数中使用emits('自定义函数名',传递的值)方法发射自定义函数，然后注册自定义事件；

3. vue3绑定动态样式，定义数据和方法，在style中设置值时候使用v-bind(变量名)；即可绑定动态样式

4. 在setup的script的标签对中使用import导入的组件不需要注册，可直接使用；

 setup语法糖中使用vuex数据

 import { useStore } from 'vuex'
// 1.获取仓库对象
var store = useStore();
function change() {
  // 2.调用仓库对象的修改方法
  store.commit('仓库中的更改方法名',999)
}

在页面中使用仓库对象中的数据或者当前路由的参数时候与之前的用法一样：

使用仓库中的某个变量的数据：{{$store.state.变量名}}

获取当前路由的收到的参数：{{$route.query.name}}；

4. vue3懒加载

#main.js
//第一步 npm install vue3-lazy -s下载懒加载
// 第二部 导入懒加载
import vueLazyLoad from 'vue3-lazy'; 
// 第三步 在createApp(App)后面调用use方法，传入懒加载；
var app = createApp(App);
// 第一个参数是导入的懒加载，第二个参数是懒加载的占位图
app.use(vueLazyLoad,{
    loading:require('@/assets/placeholder.gif')
})

// 第四步在img标签对中添加v-lazy属性，给该属性赋值图片真正的地址；

5.vue生命周期函数总结

Vue2

beforeCreate  created    创建实例前 / 后的执行的钩子函数

beforeMount  mounted   组件模板挂载到页面前/ 后的执行的钩子函数

beforeUpdate   updated   数据更新前 / 后执行的钩子函数

beforeDestroy  destroyed  组件销毁之前 / 后执行的钩子函数

activated   deactivated   组件激活 / 失活时候执行的钩子函数;在使用keep-alive将route-view标签包裹后，进行路由跳转时候触发；

Vue3 钩子函数使用前需要加on

beforeCreate  created    创建实例前 / 后的执行的钩子函数

beforeMount  mounted   组件模板挂载到页面前/ 后的执行的钩子函数

beforeUpdate   updated   数据更新前 / 后执行的钩子函数

beforeUnmount  unmounted  组件销毁之前 / 后执行的钩子函数

activated   deactivated   组件激活 / 失活时候执行的钩子函数;在使用keep-alive将route-view标签包裹后，进行路由跳转时候触发；

 6. transition动画vue2与vue3的不同；

默认只有一个transition；

vue2: .v-enter(leave) 初始 .v-enter(leave)-active 动画时间、运动轨迹  .v-enter(leave)-to 结束

vue3: .v-enter(leave)-from  初始 .v-enter(leave)-active 动画时间、运动轨迹  .v-enter(leave)-to 结束

区别就是vue3的初始状态变为了 .v-enter(leave)-from ；