在vue3中使用vuex——hooks调用
在 vue3 中的 setup 中使用 vuex，需要使用 computed 进行响应式，如果变量过多，考虑使用 mapState 或者 mapGetters，然而 setup 中没有 this 属性，导致原 vue2 的 computed 扩展写法失效，这里提供一种思路，编写了一个 hooks，使得可以在 setup 中完美使用 vuex。
useMapState1234567891011121314151617import { mapState, useStore } from "vuex";import { computed } from "vue";export const useMapState = (map) => { //拿到store对象 const store = useStore(); //获取到mapState对应对象的function const storeState = mapState(map); //对数据进行转换，将每个函数传入到computed中 ...
vue简易渲染器实现
html：
12345678910111213141516<body> <div id="app"></div> <script src="./render.js"></script> <script> //1. 通过h函数来创建一个Vnode const vnode = h( "div", { class: "why", onClick: "(e)=>{console.log(e)}" }, [h("h2", null, "当前计数：100"), h("button", null, "+1")] ); // vdom // console.log(vnode); //2. 通过mount函数，将vnode挂载到div#app上 ...
vue自定义指令
官方文档自定义指令
指令钩子传递了这些参数：
el指令绑定到的元素。这可用于直接操作 DOM。
binding包含以下 property 的对象。
instance：使用指令的组件实例。
value：传递给指令的值。例如，在 v-my-directive="1 + 1" 中，该值为 2。
oldValue：先前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否有更改都可用。
arg：传递给指令的参数(如果有的话)。例如在 v-my-directive:foo 中，arg 为 "foo"。
modifiers：包含修饰符(如果有的话) 的对象。例如在 v-my-directive.foo.bar 中，修饰符对象为 {foo: true，bar: true}。
dir：一个对象，在注册指令时作为参数传递。例如，在以下指令中
使用场景通常情况下，你需要对 DOM 元素进行底层操作，这个时候就会用到自定义指令
一个简单的自定义局部指令 v-focus1234567891011121314151617181 ...
h函数
h 函数使用接收三个参数
tag 标签的名字|组件|函数式组件‘div’
props：
与 attribute、prop 和事件相应的对象。我们会在模板中使用
子元素
子 VNodes，使用’h()’构建或使用字符串获取”文本 Vnode”或者有插槽的对象
1234567[ "Some text comes first", h("h1", "A headline"), h(MyComponent, { someprop: "foobar", }),];
下面是一个简单的例子
123456789101112import { h } from "vue";export default { render() { return h( "h2", { class: "title", }, &q ...
compositionApi-3
生命周期钩子setup 可以用来替代 data、methods、computed 、watch 等等这些选项，也可以替代生命周期钩子。
选项式 API
Hook inside setup
beforeCreate
Not needed*
created
Not needed*
beforeMount
onBeforeMount
mounted
onMounted
beforeUpdate
onBeforeUpdate
updated
onUpdated
beforeUnmount
onBeforeUnmount
unmounted
onUnmounted
errorCaptured
onErrorCaptured
renderTracked
onRenderTracked
renderTriggered
onRenderTriggered
activated
onActivated
deactivated
onDeactivated
可以看到 beforeCreate 和 create 在 setupApi 中是没有的，我 ...
webpack配置示例
webpack 配置参考123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133const path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin");const { CleanWebpackPlugin } = require("clean-webpack-plugin");const we ...
第一篇博客
测试阅读全文功能
这是第一篇博客