学习了两个月的vue3.0总结
目前自学前端1年,自学vue2.0到vue3.0,第一次发博客总结了下ximd,今天尝试写一下博客,有什么不对的希望大家能帮忙指出。
组合式API
个人觉得vue3.0最大亮点就是setup,写起来和vue2.0感觉完全不同,现在来看看吧:
- setup ,创建组件实例,然后初始化props,紧接着就调用setup函数。 从生命周期的角度来看,它会在beforeCreate之前执行。也就是创建组件先执行setup、beforeCreate、create,由于不能在setup函数中使用data、methods,为了避免使用Vue出错,所以把setup函数中this修改为了undefined,其中包含props与context,props: 用来接收 props 数据,context 用来定义上下文, 上下文对象中包含了一些有用的属性,这些属性在 vue 2.x 中需要通过 this 才能访问到, 在 setup() 函数中无法访问到 this,是个 undefined,setup中还需要返回值return。
- Reactive,该方法接收一个参数{}创建一个响应式对象。跟Vue2.x的Vue.observable一样。如果该参数不是对象的话,也可以渲染到模板上,但不是响应式的数据。
- toRefs,toRefs() 函数可以将 reactive() 创建出来的响应式对象,转换为普通的对象,只不过,这个对象上的每个属性节点,都是 ref() 类型的响应式数据。
- Ref,该方法接收一个参数,可以是单个值,也可以是一个对象,并且都是响应式的数据。当传入一个对象时{},内部将调用reactive方法进行转换为响应式数据。返回值里面带有.value属性取值,当使用模板渲染的时候可省去.value。
- isRef,isRef() 用来判断某个值是否为 ref() 创建出来的对象;
- Computed,该方法可以传入一个函数,默认该函数就是getter,不管getter返回值为一个ref响应式数据还是一个普通变量,数据都是只读不能改变,如下代码片段:
import { ref, computed } from “vue” export default { name: ‘test’, setup() { let name = ref(“999”) let test = computed({ get() { return name.value; }, set(val) { return name.value = val; } }); test.value = “123” } }
- Readonly,该方法接收传入一个对象,默认是只读功能,是深层对象只读,不管嵌套多少层的属性都是只读状态。
- WatchEffect,该方法接收一个函数并且立即执行,并当该函数里的变量变更时,重新执行该函数。该方法无法获取到原值,只能是改变之后的值,如果需要取消监听则要执行watchEffect的返回值
import { ref, watchEffect } from “vue” export default { name: ‘test’, setup() { let name = ref(“冯哥哥”); let age = ref(123); let stop = watchEffect(() => { name.value; // 监听name age.value; // 监听age console.log(name.value) console.log(age.value) }) setTimeout(() => { name.value = “冯哥哥掉马桶里” }, 5000) setTimeout(() => { age.value =321 ; setTimeout(stop, 300) }, 1000) } } 如果要监听哪个值,需要在该函数里写出来,否则监听无效;
- Watch,watch等同于Vue2.x中的this.$watch,watch需要监听特定数据,默认情况是懒执行,也就是只有当数据发生变化时才执行第二个参数函数,对比WatchEffect,watch为懒执行函;更明确哪些状态改变触发监听器;可以监听获取到变化前后的值
watch(name,(newVal, oldVal) => { console.log(newVal, oldVal) }) 监听多个值时 watch([name, age], (newVal, oldVal) => { console.log(newVal, oldVal) })
更快的性能
1.diff算法,3.0 新增加了静态标记(PatchFlag), 在与上次虚拟节点进行比较的时候,只对比带patch flag的节点并且可以通过flag的信息得知当前节点要对比的具体内容 2.hoistStatic 静态提升, 3.0 对不参与更新的元素,会做静态提升,只会创建一次,在渲染的时候复用。 3.cacheHandlers 事件侦听器缓存, 默认情况下onClick会被视为动态绑定,所以每次都会去追踪它的变化。 4.ssr,当有大量静态内容时,这些内容会被当做纯字符串推进一个buffer里面即使存在动态的绑定,会通过模板插值嵌入进去,这样会比通过虚拟Dom渲染快很多。 当静态内容大到一定量级的时候,会用createStaticVNode方法在客户端去生成一个static node 这些node,会被直接innerHtml,不需要创建对象,然后根据对象渲染
Provide && Inject
该方法和Vue2.x的 provide、inject一样的。但是Vue3新特性这俩方法只能在setup中使用。 Provide:接收2个参数,第一个key值,第二个value值,进行传递 Inject:接收2个参数,第一个是provide的key值,默认第二个参数可选,可以设置默认值(当找不到key值,设置一个默认值)
//app.vue import test from “./gcy/test” import { provide, ref } from “vue” export default { name: ‘App’, components: { test }, setup() { let name = ref(“好的吧”) provide(“name”, name) // 传入一个响应式数据 }, } // test.vue import { inject } from “vue” export default { name: ‘test’, setup() { let name = inject(“gcy”) console.log(NAME) let title = inject(“key”, 123) console.log(title) // 这时就会触发默认值,因为这里找不到这个key值 return { NAME } } }
生命周期
在Vue3.X也可以在setup函数下使用生命周期,这些钩子函数写法跟之前的生命周期写法不同。
beforeCreate --> setup //创建之前 created --> setup //已创建 beforeMount --> onBeforeMount // 渲染之前 mounted --> onMounted //已渲染 beforeUpdate --> onBeforeUpdate //更新之前 updated --> onUpdated // 已更新 beforeDestroy --> onBeforeUnmount // 摧毁之前 destroyed --> onUnmount //已摧毁 注意:这些生命周期写法只能在setup函数下使用,在其它地方使用则会报错
LifeCycle Hooks(新的生命后期),新版的生命周期函数,可以按需导入到组件中,且只能在 setup() 函数中使用, 但是也可以在setup 外定义, 在 setup 中使用。 使用keep-alive,可以使用onActivated与onDeactivated两个生命周期函数,下面在详细介绍keep-alive的两个生命周期函数。
创建的三种方式
1.webpack
git clone https://github.com/vuejs/vue-next-webpack-preview.git cd projectName npm install npm run dev
2.vue-cli
npm install -g @vue/cli vue create projectName cd projectName vue add Vue-next npm run serve
3.vite(比webpack更快,vue团队的脚手架)
npm install -g create-vite-app create-vite-app projectName npm install npm run dev
过滤器的移除
过滤器其实还挺好用的~~现在使用computed代替
keep-alive
当在内部切换组件时,将相应地调用其onActivated(缓存激活)和onDeactivated(在组件切换中老组件消失的时候执行)生命周期挂钩。
1.路由配置
> const routes = [
{
path: '/',
name: 'home',
component: home,
meta: {
keepAlive:true,
}
},
{
path: '/about',
name: 'about',
component: () => import('@/views/about.vue'),
meta: {
keepAlive:false,
}
}
]
2.组件配置
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<router-view v-slot="{ Component }">
<!-- vue3.0配置 keep-alive缓存-->
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive" />
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive" />
</router-view>
</div>
</template>
其中include和exclude,include是绑定需要缓存的组件,并且要和组件名一致;exclude绑定则是不需要缓存的组件。当两个属性同时使用时exclude权重大于include
<!-- 逗号分隔字符串 -->
<keep-alive include="home,about" exclude="about">
<component :is="Component" />
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/home|about/">
<component :is="Component"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['home', 'about']">
<component :is="Component"></component>
</keep-alive>
缓存的最大数值,keep-alive还有一个max属性,代表缓存组件最大数量,一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉
<keep-alive :max="10">
<component :is="Component"></component>
</keep-alive>
vue-router
都是我目前项目的基本配置router.js:
import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../views/home.vue";
const routes = [
{
path: "/home",
name: "home",
component: Home,
},
{
path: "/test",
name: "Test",
component: () =>
import( "../views/Test.vue"),
},
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
main.js中代码配置项
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
const app = createApp(App);
app.use(router);
app.mount("#app");
如何引用
import { useRoute, useRouter } from "vue-router";
嵌套路由
const routes = [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile,
},
{
path: 'posts',
component: UserPosts,
},
],
},
]
路由的导航守卫
router.beforeEach((to, from, next) => {
console.log(to, from)
next()
})
router.afterEach(() => {
})
路由跳转
<li><router-link :to="{name: 'login'}">登录</router-link></li>
router.push({name: 'home'})
router.push({name: 'home',query:{id:ids}})
router.push({name: 'home',params:{id:ids}})
vuex
个人理解为状态管理,保存自己需要的状态,比如购物车,分页类似的可以使用vuex或者本地存储
import {createStore} from 'vuex'
const store = createStore({
state: {
user:'gcy'
},
getters:{
}
mutations: {
SetUser(state,val){
state.user = val
}
},
actions:{
}
})
export default store;
|