vue3.0部分基础知识 及使用vue3.0书写todo
涉及知识点
1.vue组件的定义-------defineComponent
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
// 已启用类型推断
})
</script>
2.Setup的使用 详细可点击至官网查看
在 setup() 内部,没有this,所以不能使用this
使用 setup 函数时,它将接收两个参数:props 和 context
setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新。
注意:因为 props 是响应式的,你不能使用 ES6 解构,它会消除 prop 的响应性; 如果需要解构 prop,可以在 setup 函数中使用 toRefs 函数来完成此操作
import { toRefs } from 'vue'
setup(props) {
const { title } = toRefs(props)
console.log(title.value)
}
如果 title 是可选的 prop,则传入的 props 中可能没有 title 。在这种情况下,toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它:
import { toRef } from 'vue'
setup(props) {
const title = toRef(props, 'title')
console.log(title.value)
}
context 是一个普通的 JavaScript 对象,它暴露组件的三个 property:
export default {
setup(props, context) {
// Attribute (非响应式对象)
console.log(context.attrs)
// 插槽 (非响应式对象)
console.log(context.slots)
// 触发事件 (方法)
console.log(context.emit)
}
}
注意: context 是一个普通的 JavaScript 对象,也就是说,它不是响应式的,这意味着你可以安全地对 context 使用 ES6 解构
export default {
setup(props, { attrs, slots, emit }) {
...
}
}
3.组件之间的传值
父传子:与vue2相同 父组件通过自定义属性传值 子组件通过props接受
<nav-main :list="list"></nav-main> //父组件
props:{ //子组件
list:{
type:Array,
required:true
}
}
子传父:子组件通过事件分发传递 父组件通过自定义事件接受
setup(props, ctx) { //子组件
let enter = (val) => {
ctx.emit('add', val);
};
return {
enter,
};
}
<nav-header @add="add"></nav-header> //父组件
4.本地存储
5.vuex的使用
import { createStore } from 'vuex'; //文件地址store/index.js
export default createStore({
// state:定义所需要的状态
state: {
list: JSON.parse(localStorage.getItem('todo')) || [
{
title: '吃饭',
complete: false,
},
{
title: '敲代码',
complete: false,
},
{
title: '睡觉',
complete: true,
},
{
title: '发呆',
complete: true,
},
],
},
// mutations:同步修改state 都是方法
// 第一个参数state是修改的参数,第二个参数是需要修改的值
mutations: {
addTodo(state, payload) {
// 添加任务 payload为需要添加的数据
state.list.push(payload);
localStorage.setItem('todo', JSON.stringify(state.list));
},
delTodo(state, payload) {
// 删除任务 payload为需要删除的下标
state.list.splice(payload, 1);
localStorage.setItem('todo', JSON.stringify(state.list));
},
clear(state, payload) {
// 过滤后的数组传进来
state.list = payload;
localStorage.setItem('todo', JSON.stringify(state.list));
},
setLocal(state, payload) {
localStorage.setItem('todo', JSON.stringify(payload));
}
},
// actions异步提交mutation
// 第一个参数是store,第二个参数是需要修改的值
actions: {},
// modules:模块化
modules: {},
});