Vue3停止支持IE的几点原因IE对Proxy不支持，Vue要使用Proxy => Evan You 带着 Vue3抛弃IEIE是一个过去式，微软自己都开发了一个Edge => 自己公司抛弃 IE一些政府机关网站（遗留系统）以前很喜欢IE,现在会提示使用Chrome => 抛弃IE综上前端er抛弃IE , 一种趋势！思考微软靠着强制携带IE浏览器来占领市场的力量在浏览器大战年代所向披靡，归其原因是市场的地位。但是时间是会将金子掏出来的，看现在的Chrome浏览器！！ 如果能...
Vue3.0全家桶最全入门指南 - 3.x跟2.x的其他差异：https://juejin.cn/post/6867123749565497358#heading-10Vue3.0 新特性以及使用变更总结(实际工作用到的)：https://blog.csdn.net/xgangzai/article/details/114957652原文：https://www.cnblogs.com/ziyoublog/p/14749229.html
vue3用composition api 取代了之前的options api，并且加强了支持typescript，另代码可读性和可改性更强了，用习惯了setup函数真的可以说句，真香。但是不可避免的，需要趟一些雷，比方说element-plus的表单验证功能。由于setup里取消了this获取实例，就突然变得不知所措。以下是我填坑的一些经验。先看element-plus官方文档中的验证写法。methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) ...
vue3中在setup中并没有this,所以路由跳转和传参的方式都要有所改变1.路由跳转1.1 引入import { useRouter } from ‘vue-router‘1.2在setup中创建路由对象 ，语法以前vue2类似，这里携带id的路由参数setup(){ const router = useRouter(); function goSeekHelpDetail (){ router.push({ name:‘taskSeekHelpDetail‘, query:{ id: ‘1‘ } }) }; return{ } }2.这里获取路...
retive的错误用法<template><div>司藤的信息==>{{ objInfo }}<button @click="handerHttpServe">获取远端的值</button></div>
</template>
<script>
import { reactive } from ‘@vue/reactivity‘
export default {setup () {let objInfo=reactive({ })function handerHttpServe(){setTimeout(()=>{objInfo={name:‘司藤‘,sex:‘女‘,}},400)}return {objInfo,handerHttpServe}}
}
</script>
为什么无法更新视图呢？？我们都知道...
Test1.vue<template><div class="test1"><h1>This is a test1 page</h1><Test1Top :add-person="addPerson"/><Test1Center :persons="persons":del-person="delPersonWithIndex":selected-all-persons="selectedAllPerson"/><Test1Bottom :persons="persons":del-checked-persons="delCheckedPersons"/></div></template><script>// @ is an alias to /srcimport Test1Top from ‘@/components/Test1Top.vue‘;
import Test1Center...
刚开始我用vue create hello-world 命令新建项目然后用向下箭头选中Manually select features配置项，最后点击Enter，没起作用，项目还是按照默认的配置default（babel,eslint）走；解决方法：按官网提示的 使用winpty vue.cmd create hello-world 命令创建项目，向下箭头选中Manually select features配置项，最后点击Enter会弹出可配置项。官网提示：如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须...
非父子组件的通信Provide和InjectProvide和Inject基本使用Provide和Inject函数的写法处理响应式数据A pp.vue<template><div><home></home><button @click="addName">+name</button></div>
</template><script>import Home from "./Home.vue";import { computed } from "vue";export default {components: {Home,},// 为了使用this。，写成函数provide() {return {name: "why",age: 18,// this.names.length：一次性赋值，不会改变/...
借鉴博客：https://www.jianshu.com/p/6307c568832d/https://www.cnblogs.com/KenFine/p/10850386.html 项目创建好后，如下：(注意：vue3.0以后创建的目录没有config文件夹了) ==========下面来配置一下路由vue-router=====================1、安装命令：$ cnpm i vue-router -S 2、初始化一下，在项目中使用路由： 2.1、在项目的src目录下，新建一个router目录，在新建的router目录下新建一个index.js文件，如下： ...
报错出现场景本人使用的是vue 3.x UI使用的是element-plus ,开发环境不会报错，打包后 报错排查后发现都是el-table-column 组件 报错 导致虚拟dom 进行diff算法是报错错误分析<el-table-column prop="typeId" align="center" label="类型"><template #default="scope"><div>{{remarkTypeList.filter(v => v.id == scope.row.typeId)[0]?.name // 数据一开始，这里的下标[0]undefined }}</div></template>
</el-table-column><e...
什么是 DOM？如果我们把这个 HTML 加载到浏览器中，浏览器创建这些节点，用来显示网页。所以这个HTML映射到一系列DOM节点，然后我们可以使用JavaScript进行操作。例如：let item = document.getElementByTagName(‘h1‘)[0]
item.textContent = "New Heading"
VDOM网页可以有很多DOM节点，这意味着DOM树可以有数千个节点。这就是为什么我们有像Vue这样的框架，帮我们干这些重活儿，并进行大量的JavaScript调用。然而，搜索和更新数...
基本写法（写的有点糙细节即知识点有时间再完善一下）写法基本跟vue2.0差不多 理解就是多了个 setup这里封装了一个Menu 进行演示 setup 内部使用 vue-routersetup 希望正确的函数式编程 所以内部this指向不在是组件实例 而是undefined所以 setup 内部 vue-router 的正确使用 如下图所示 vuex同理 (非setup内部 this指向实例 依然可以直接使用)useRoute 相当于返回 $routeuseRouter 相当于返回 $router axios 的封装以及挂载值得注...
1.vue2的响应式3和2的响应式原理不同，既然3修改了实现响应式的方法，那2的响应式的肯定是有缺陷的。所以需要先了解一下2的响应式：Vue2官方网站对响应式的解释主要的思想在于：2的响应式主要实现由Object.defineProperty实现，当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Vue无法检测property的添加或...
vue3.0源码组织方式的变化采用ts重写独立的功能模块提取到单独的包中90%的api兼容Vue2.xComposition API组合api解决vue2.x options api 开发大型项目不好拆分和重用的问题性能提升重写响应式重写虚拟dom提升两到三倍Vite不需要打包直接运行项目源码组织方式源码采用typescript重写使用monorepo管理项目结构
每个模块都可以单独发布测试使用packages 结构packages
│ compiler-core ------ 与平台无关的编译器
│ compiler-do...
let ok = ref(true)watchEffect( onInvalidate => {// 代码一console.log(‘执行一些代码‘, ok.value) console.log(‘执行更多的代码‘); // 代码二 onInvalidate(()=>{ console.log(‘除了在初始运行时不被调用，我总是在【执行一些代码】之前被执行(调用)‘); }) })1、watchEffect参数的定义, 一层一层的，每一层都是一个函数指针。C/C++watchEffect（fn1）; fn1(fn2);fn2(fn3);onInvalidate 就是 fn2;2、fn1首次执行时，on...