vue3
文章平均质量分 52
vue3
Mosowe
vue(2/3),react,uniapp,小程序,javascript,typescript,node
展开
-
vue3:国际化开发
框架:vite+vue3+ts国际化插件:vue-i18n安装:npm i vue-i18n --save配置:在src目录下新建文件夹:/langlang目录下新建文件: /zh/index.ts 、/en/index.ts,分别表示中文、英文,内容如下(结构都一样):export default { web:{ title: '我是标题 {name}', // name是传参 message: '你好啊' }}lang目录下新建index.ts,将/zh原创 2022-05-11 14:57:15 · 950 阅读 · 1 评论 -
vue3使用jsx开发
基础框架:vite+vue3安装@vitejs/plugin-vue-jsx修改vite.config.jsimport vue from '@vitejs/plugin-vue'import vuejsx from "@vitejs/plugin-vue-jsx"export default defineConfig({ plugins: [ vue(), vuejsx() ]})如果不做上述处理,直接使用jsx开发的话,浏览器就会提示:Reac原创 2022-04-26 16:57:40 · 798 阅读 · 0 评论 -
react的createContext及useContext 和 vue3的 provide 及 inject
这几个方法都是用于多层嵌套组件时,父组件向某个深层组件的传值,避免了props一层一层的传递。react createContext 和 useContext新建context.ts文件:import { createContext } from 'react'export const MyContext = createContext<any>(null)父组件:import {MyContext} from './context'import Child1 from './c原创 2022-04-08 16:31:51 · 2018 阅读 · 0 评论 -
react useRef和vue3的ref
在react中:function Home(props: any) { const dom = useRef(null) useEffect(() => { // useEffect是在浏览器渲染后执行的,此时可以拿到dom console.log(dom?.current) // <div class="Home">useRef</div> }, []) return ( <div className="Home" ref={原创 2022-04-08 15:15:56 · 1584 阅读 · 0 评论 -
react的useState 和 vue3的ref和reactive
react 的 useState使用useState声明一个响应式变量,返回一个 state,以及更新 state 的函数。const [state, setState] = useState(initialState);在初始渲染期间,返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。setState(newState);更新方式普通更新:set原创 2022-04-08 14:48:19 · 2165 阅读 · 0 评论 -
react的useMemo 和 vue3的computed
react useMemo const total = useMemo(() => { return number * state }, [number, state])vue3 computedconst total = computed(() => { return number * state})两者都会根据number 和 state的改变而改变total,都是计算属性,都返回一个计算后的值。computed:可写计算属性const firstNam原创 2022-04-08 14:43:43 · 2162 阅读 · 0 评论 -
vue3: watch和watchEffect
vue3: watch和watchEffect两者区别watch:在每次响应式状态发生变化时触发回调函数,是懒执行的:仅在侦听源变化时,才会执行回调。只追踪明确侦听的源。它不会追踪任何在回调中访问到的东西。另外,仅在响应源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。watchEffect:会立即执行一遍回调函数,如果这时函数产生了副作用,Vue 会自动追踪副作用的依赖关系,自动分析出响应源。watchEffect则会在副作用发原创 2022-04-08 11:59:52 · 1621 阅读 · 0 评论 -
react 与 vue3 标签插入富文本方式
vue3在标签中显示富文本:<tempalte> <div v-html="richText"></div></tempalte><script setup lang="ts" name="test"> const richText = ref('<p style="color:#ff0000">测试</p>')</script>react中标签显示富文本:const test =原创 2022-04-08 10:39:11 · 664 阅读 · 0 评论 -
基于vite搭建一个vue移动端脚手架
vue3语法糖基于移动端的配置。vite官网优点:光速启动热模块替换按需编译脚手架功能vant3.0移动端组件UI库axios网络数据交互vuex状态管理vue-router路由管理postcss-px-to-viewport移动端px转vw/vhless预编译autoprefixer自动补全typescript语法window.$cancelRequest()取消请求,再初始化即还没有axios请求数据前调用会报错。环境变量、axios、px转vw/vh及原创 2021-10-21 14:35:27 · 2451 阅读 · 0 评论 -
vue:vue-router导航守卫
文章目录全局导航守卫路由独享守卫组件独享导航守卫组合式 API中的路由函数组合式 API中的导航守卫全局导航守卫全局前置守卫beforeEach:一般用于权限校验全局解析守卫beforeResolve:是获取数据或执行任何其他操作(如果用户无法进入页面时你希望避免执行的操作)的理想位置。全局后置钩子afterEach:它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。路由独享守卫beforeEnterconst routes = [ { path: '/u原创 2021-10-21 14:00:43 · 339 阅读 · 0 评论 -
vue3:语法糖内的defineProps及defineEmits、defineExpose
defineProps获取组件传值<template> <h1>{{ msg }}</h1> <div @click="clickThis">1111</div></template><script setup lang="ts"> defineProps<{ // 采用ts专有声明,无默认值 msg: string, num?: number }>() //原创 2021-10-21 09:26:47 · 79602 阅读 · 10 评论 -
vue:首屏加载优化方案
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script><script src="https://unpkg.com/vue-router@3.2.0/dist/vue-router.js"></script><script src="https://unpkg.com/vuex@3.4.0"></script><script src="https://c原创 2021-09-22 10:09:30 · 1950 阅读 · 0 评论 -
vue3:自定义组件之v-model父子组件双向绑定
vue3.x移除了vue2.x的model选项,自定义组件双向绑定不在使用以下方法:model: { prop: 'value', //3.x默认值改为了modelValue event: 'input' //3.x默认值改为了update:modelValue },//使用 this.$emit('input', index);vue3.x采用以下方式(v-model默认对应的prop值是modelValue):父组件:<inpageMenus v-model原创 2021-04-24 08:47:39 · 7565 阅读 · 7 评论 -
vue3:自定义js文件(插件或配置)
原文地址举例腾讯防水墙js调用文件:v2// TencentCaptcha.jsimport Vue from 'vue';const appId = '*********';Vue.prototype.$txCaptcha = (cb) => { const t = new window.TencentCaptcha(appId, (rsp) => { t.destroy(); cb(rsp); }, {}); t.show();};// main原创 2021-04-23 22:40:05 · 3151 阅读 · 0 评论 -
vue3:vue2中的protoType更改为config.globalProperties
protoType替换为config.globalProperties原文地址在main.js中:vue2Vue.prototype.$verson = '1.0.0'vue3Vue.config.globalProperties.$verson = '1.0.0'使用都是一样的this.$verson原创 2021-04-23 22:38:05 · 2545 阅读 · 2 评论 -
vue3:vue3与vue2初始化对比
vue2import Vue from 'vue';import App from './App.vue';import router from './router';import store from './store';new Vue({ router, store, render: (h) => h(App),}).$mount('#app');vue3import { createApp } from 'vue';import App from './App.v原创 2021-04-23 22:34:09 · 226 阅读 · 0 评论 -
vue3:vue3版本变化
一. 响应式重构Proxy重构响应式系统,使用Proxy替换Object.defineProperty,使用Proxy优势:可直接监听数组类型的数据变化监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升可拦截apply、ownKeys、has等13种方法,而Object.defineProperty不行直接实现对象属性的新增/删除let test = { name: "小红", age: 15 }; test原创 2021-04-23 22:30:26 · 1385 阅读 · 0 评论