vue3初探---vue3新特性学习
vue3新特性:向后兼容,兼容vue2的写法性能提升,TypeScript的支持,Composition API,本文对setup,reactive,toRefs,ref,toRef,watchEffect,watch,等新属性、方法、变化等进行简单的介绍和代码示例使用,简单介绍setup语法糖和vue新组件TeleportFragment Suspense
vue3初探—vue3新特性学习
二、vue3初探—在vue3和vuex4.x中使用typescript
三、vue3初探----(vue3项目)vuex4.x中使用typescript最终写法
四、在三中用到的一些TypeScript中的一些高阶类型 Omit Pick ReturnType Parameters
项目构建
vite
npm init @vitejs/app demo-vue3-vite
选择vue,选择vue-ts
cd demo-vue3-vite
npm install
npm run dev
vue3的新特性
向后兼容:兼容vue2的写法
性能提升
TypeScript的支持
Composition API
当然还有其他改变,可查看官方文档 https://v3.cn.vuejs.org/guide/migration/introduction.html#%E5%80%BC%E5%BE%97%E6%B3%A8%E6%84%8F%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7
Composition API
setup函数
setup
函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。
setup会在 beforeCreate前被调用,同时在vue3中setup代替了beforeCreate和created
网上许多文章认为setup执行时间在beforeCreate
和created
之间但试验结果setup是在beforeCreate之前执行
<script>
export default {
setup() {
console.log('setup')
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
}
</script>
vue3中的生命周期函数,可以按需导入到组件中,且只能在 setup() 函数中使用
<script>
import { onMounted, onUpdated, onUnmounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('mounted!');
});
onUpdated(() => {
console.log('updated!');
});
onUnmounted(() => {
console.log('unmounted!');
});
return {};
}
};
</script>
参数
setup有连个参数 props和context
props
接收当前组件props选项的值,即获取父组件传递过来的参数
context
,接收一个上下文对象,该对象中包含了一些在vue 2.x
中需要通过 this
才能访问到属性
<script lang="ts">
import {defineComponent } from 'vue';
export default defineComponent({
props: {
name: String
},
setup(props, context) {
context.attrs;
console.log(props.name);
context.slots;
context.emit;
}
});
</script>
返回值
函数返回的内容可作为模板渲染
<template>
<p>{{name}}</p>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
let name = ref('guoang');
return {
name
};
}
});
</script>
getCurrentInstance
支持访问内部组件实例
const internalInstance = getCurrentInstance()
getCurrentInstance在await之后调用无法获取到内部组件实例
因为vue在执行时不会等待setup执行完毕,而在setup后面上下文会被设为null所以在await之后获取到是null
export default defineComponent({
async setup() {
const result = ref('')
result.value = await resultValue()
const internalInstance = getCurrentInstance()
console.log('await之后getCurrentInstance()获取不到',internalInstance) //internalInstance = null
return {
result,
}
},
})
响应式api
响应式api
reactive
reactive()
函数接收一个普通对象,返回该普通对象的响应式代理对象
reactive()
接收一个泛型来定义他的类型
<template>
<p>{{user.name}}</p>
<p>{{user.age}}</p>
</template>
<script lang="ts">
interface User {
name: string;
age: number;
}
import { reactive, defineComponent } from 'vue';
export default defineComponent({
setup() {
let user = reactive<User>({
name: 'guaong',
age: 0
});
return {
user
};
}
});
</script>
如果reactive生成的数据如果被展开就失去了响应性
setup() {
let state = reactive({ count: 0 });
function add() {
state.count += 1;
}
return { ...state };
}
toRefs
toRefs()函数可以将reactive()创建出来的响应式对象,转换为普通对象,只不过这个对象上的每个属性节点,都是ref响应式数据
setup() {
let state = reactive({ count: 0 });
function add() {
state.count += 1;
}
return { ...toRefs(state) };
}
ref
reactive()负责复杂的数据结构,ref()则可以把基本的数据结构包装成响应式
ref()
函数接收一个参数值,返回一个响应式的数据对象。该对象只包含一个指向内部值的 .value
属性
在模板中访问时,无需通过.value属性,它会自动展开
ref()
接收一个泛型来定义他的类型
<template>
<!-- 无需加value -->
<h2>{{num}}</h2>
<button @click="add">累加</button>
</template>
<script lang="ts">
import { ref,defineComponent } from 'vue';
export default defineComponent( {
setup() {
let num = ref(2);
function add() {
num.value += 1; //需要加value
}
return { add, num };
}
});
</script>
toRef
创建一个ref类型数据, 并和以前的数据关联
备注
1.toRef
创建一个ref类型数据, 并和以前的数据关联
2.toRefs
批量创建ref类型数据, 并和以前数据关联
3.toRef和ref区别
ref-创建出来的数据和以前无关(复制)
toRef-创建出来的数据和以前的有关(引用)
ref-数据变化会自动更新界面
toRef-数据变化不会自动更新界面
computed
computed()
函数用来创建计算属性,函数的返回值是一个 ref
的实例
setup() {
let num = ref(2);
function add() {
num.value += 1;
}
let double = computed(() => num.value * 2);
return { add, double, num };
}
或者,接受一个具有 get
和 set
函数的对象,用来创建可写的 ref 对象。
const count= ref(2);
const newCount = computed({
get: () => count.value,
set: val => {
count.value = val
}
})
watchEffect
立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
const count = ref(0)
watchEffect(() => console.log(count.value))
触发时机
const count = ref(0)
watchEffect(() => {
const text = count.value ;
console.log(text);
}, {
flush: 'post' // 'pre'组件更新前运行,'post'组件更新后运行,默认为'pre'
})
watch
参数
watch第一个参数传入的 要监听的对象,第二个参数是回调函数,监听的对象改变就会执行回调函数,第三个参数深度监听或立即执行的配置
返回值
watch返回一个方法调用可停止监听
const unwatch = watch(
() => state.count,
(newVal, oldVal) => {
console.log(oldVal);
console.log(newVal);
},
{ deep: true, imediate: true }
);
const stop = () => {
unwatch();
};
也可以监听多个对象
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
/* ... */
})
vue3的响应式系统
vue3将响应式系统完成独立的一个包**@vue/reactivity**,也就是说ref,reactive,effect… 这些方法可以用在任何项目中(浏览器,node),这些方法不再依赖于vue,只需要import { reactive, effect } from “@vue/reactivity”;就可以使用
封装一个操作localStorage的方法
import { reactive, effect } from "@vue/reactivity";
/**
* @Author: guoang
* @description: 操作localStorage
* @param key 需要获取localStorage的key
* @param defaultValue 默认值,获取不到localStorage对应key的数据则返回默认值
* @return 一个响应式对象
*/
export default function newStorage<T extends {}>(key: string, defaultValue = {}): Partial<T> {
let data: Partial<T>= reactive({});
Object.assign(data, window.localStorage.getItem(key) && JSON.parse(<string>(localStorage.getItem(key))) || defaultValue);
//在data改变时会触发effect中的方法重新设置localStorage
effect(() => {
window.localStorage.setItem(key, JSON.stringify(data))
});
return data;
}
使用
<template>
<label>姓名:</label>
<span>{{userInfo.name}}</span>
<label>年龄:</label>
<span>{{userInfo.age}}</span>
<button @click="changeUserInfo">changeUserInfo</button>
</template>
<script lang="ts">
import { reactive, computed, ref, onMounted } from 'vue';
import newStorage from './newStorage';
interface UserInfo{
name: string
age: number|string
}
export default {
setup() {
let userInfo = newStorage<UserInfo>('userInfo', {
name: '名称',
age: 100
});
const changeUserInfo = () => {
userInfo.name = 'guoang';
userInfo.age = '120';
};
return { userInfo, changeUserInfo };
}
};
</script>
效果
点击changeUserInfo更新视图同时更新localStorage
模板 Refs
在vue2.X中使用vm.$refs
在vue3中
<template>
<div ref="divRef"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
export default defineComponent( {
setup() {
// 创建一个值为null的ref的对象,并返回
const divRef = ref(null);
console.log(divRef)
return{
divRef
}
}
});
</script>
setup语法糖
<template>
<Foo />
<div v-click-outside />
</template>
<script setup>
import { defineProps, defineEmit, useContext } from 'vue'; //导入组件直接使用
import Foo from './Foo.vue';
import vClickOutside from 'v-click-outside'; //导入指令直接使用 *导入指令前面必须加v
// 书写组合式 api 就像在正常的 setup 中一般,但是不需要进行手动地进行 return
//const count = ref(0) 也可以这样
ref: count = 1;
const inc = () => {
// 直接操作变量 不用.value
count++;
};
// 使用 props
const props = defineProps({
foo: String
});
//使用 emit
const emit = defineEmits(['update', 'delete']);
// 获取 slots 和 attrs
const { slots, attrs } = useContext();
</script>
vue新组件Teleport Fragment Suspense
Teleport
Teleport 提供了一种简单的方法,使我们可以控制要在DOM中哪个父对象下呈现HTML。
index.html
<body>
<div id="app"></div>
<div id="web"></div>
<script type="module" src="/src/main.ts"></script>
</body>
vue中
<template>
<div>
我在id=app
</div>
<!-- to 属性就是目标位置 -->
<teleport to="#web">
<div>我在id=web</div>
</teleport>
</template>
渲染结果
Fragment
在vue2中创建一个Vue组件,那么它只能有一个根节点,多了一层嵌套
<template>
<div>
<div></div>
<div></div>
</div>
</template>
在vue3中会有一个名为 Fragment 的虚拟元素,他并不会呈现
<template>
<div></div>
<div></div>
</template>
Suspense
Suspense异步组件
setup 中返回一个 Promise 对象
defineComponent 包裹要导出的实例对象
<template>
<h1>{{ result }}</h1>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
async setup() {
const result = ref('');
result.value = await resultValue();
return {
result
};
}
});
const resultValue = (): Promise<string> => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('HelloWorld');
}, 3000);
});
};
</script>
app.vue
使用 <Suspense> 包裹所有异步组件相关代码
<Suspense> 下 <template #default> 插槽包裹异步组件
<Suspense> 下 <template #fallback> 插槽包裹渲染异步组件之前的内容
<template>
<Suspense>
<template #default>
<HelloWorld></HelloWorld>
</template>
<template #fallback>
<h1>Loading...</h1>
</template>
</Suspense>
</template>
<script lang="ts" setup>
import HelloWorld from './components/HelloWorld.vue';
</script>
三秒后
注意点
解构props属性,如果直接在 setup 中引用,必须要加 toRefs
const { users } = toRefs(props)
setup语法糖中导入指令前面必须加v
import vClickOutside from 'v-click-outside'; //导入指令直接使用 *导入指令前面必须加v(vClickOutside)
注意点
解构props属性,如果直接在 setup 中引用,必须要加 toRefs
const { users } = toRefs(props)
setup语法糖中导入指令前面必须加v
import vClickOutside from 'v-click-outside'; //导入指令直接使用 *导入指令前面必须加v
watchEffect() 与 effect() 的区别
watchEffect()
会维护与组件实例以及组件状态(是否被卸载等)的关系,如果一个组件被卸载,那么 watchEffect()
也将被 stop
,但 effect()
则不会,普通开发中不推荐直接用 effect()
啦,使用 watchEffect()
就好了
更多推荐
所有评论(0)