在这里，闰土有句话想送给刚从JQ转变思路过来的同行们： MVVM时代，数据映像了DOM世界，一切以数据为核心，正如同数学可以描述世界一样，你只需要考虑数据或者状态即可。...所以，只要你充分理解了上面这句话，恭喜你，你已经从直接操作DOM的时代毫无压力的过渡到了MVVM时代！ 话不多说，先来看看MVVM项目的工程目录： ?...然后，你就可以大步流星地去执行以下操作了： #开启本地开发服务器，监控项目文件的变化，实时构建并自动刷新浏览器，浏览器访问 http://localhost:8081 npm run dev #使用生产环境配置构建项目...接下来我想谈谈vue的生命周期和钩子函数。 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。...在上图中大家可以看到，在beforeMount挂载前， $el里面还是{{ message }}，这就是Virtual DOM（虚拟dom）技术的应用，上来二话不说，先把坑位占了，等后面mounted挂载的时候
思考一下自己所说的那些点，自己都非常清楚明白吗？下面呢我就根据你对 vue 的理解，接着谈谈： 你刚刚说到了 MVVM，能详细说说吗？...刚刚如果你说了对象的检测，然后又没说清楚数组的处理的话，我就会问下面这个问题 那 vue 中是如何检测数组变化的呢？...数组里每一项可能是对象，那么我就是会对数组的每一项进行观测，（且只有数组里的对象才能进行观测，观测过的也不会进行观测） vue3：改用 proxy ，可直接监听对象数组的变化。...created：实例已经创建完成，因为他是最早触发的，所以可以进行一些数据、资源的请求。 mounted：实例已经挂载完成，可以进行一些 DOM 操作。...beforeUpdate：可以在这个钩子中进一步的更改状态，不会触发重渲染。 updated：可以执行依赖于 DOM 的操作，但是要避免更改状态，可能会导致更新无线循环。
问： 假设我有这个脚本： export.bash #!...echo $VAR 有没有一种方法可以通过只执行 export.bash 而不 source 它获取 $VAR？ 答： 不可以。 但是有几种可能的解决办法。...在调用 shell 的上下文中执行脚本: $ cat set-vars1.sh export FOO=BAR $ . set-vars1.sh $ echo $FOO BAR 另一种方法是在脚本中打印设置环境变量的命令.../set-vars2.sh)" $ echo "$FOO" BAR 在终端上执行 help export 可以查看 Bash 内置命令 export 的帮助文档： # help export export...help eval 相关阅读： 用和不用export定义变量的区别 在shell编程中$(cmd) 和 `cmd` 之间有什么区别 ----
Vue 实现响应式并不是在数据发生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的 DOM。...数组就是使用object.defineProperty 重新定义数组的每一项，那能引起数组变化的方法我们都是知道的，pop 、push 、shift 、unshift 、splice 、sort 、reverse...这七种，只要这些方法执行改了数组内容，我就更新内容就好了，是不是很好理解。...数组里每一项可能是对象，那么我就是会对数组的每一项进行观测，（且只有数组里的对象才能进行观测，观测过的也不会进行观测）vue3：改用proxy ，可直接监听对象数组的变化。...DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟
v-model 可以被用在自定义组件上吗？如果可以，如何使用？可以。...数组就是使用object.defineProperty 重新定义数组的每一项，那能引起数组变化的方法我们都是知道的，pop 、push 、shift 、unshift 、splice 、sort 、reverse...这七种，只要这些方法执行改了数组内容，我就更新内容就好了，是不是很好理解。...数组里每一项可能是对象，那么我就是会对数组的每一项进行观测，（且只有数组里的对象才能进行观测，观测过的也不会进行观测）vue3：改用proxy ，可直接监听对象数组的变化。虚拟 DOM 的优缺点？...DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟
这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。...（能问到这的面试官都比较注重深度，这些常规操作要记牢） （原型链的细节可以参考我的另一篇专栏） JavaScript原型链的一夜情 4.nextTick知道吗，实现原理是什么？...当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。...❝面试官：(这小子基础还可以，接下来我得上上难度了) ❞ 12.Vue模版编译原理知道吗，能简单说一下吗？ 简单说，Vue的编译过程就是将template转化为render函数的过程。...(看到这你还会发现，框架内无处不蕴藏着数据结构和算法的魅力) ❝面试官：(可以可以，看来是个苗子，不过自我介绍属实有些无聊，下一题) ❞ (基操，勿6) 14.再说一下虚拟Dom以及key属性的作用 由于在浏览器中操作
数组就是使用object.defineProperty 重新定义数组的每一项，那能引起数组变化的方法我们都是知道的，pop 、push 、shift 、unshift 、splice 、sort 、reverse...这七种，只要这些方法执行改了数组内容，我就更新内容就好了，是不是很好理解。...数组里每一项可能是对象，那么我就是会对数组的每一项进行观测，（且只有数组里的对象才能进行观测，观测过的也不会进行观测）vue3：改用proxy ，可直接监听对象数组的变化。...DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟...,但是在不同的场景中,该行为有不同的实现方案-比如选项的合并策略...其他模式欢迎补充父组件可以监听到子组件的生命周期吗比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted
，然后通知视图去更新 数组里每一项可能是对象，那么我就是会对数组的每一项进行观测，（且只有数组里的对象才能进行观测，观测过的也不会进行观测） 原理 Vue 将 data 中的数组，进行了原型链重写。...指向了自己定义的数组原型方法，这样当调用数组api 时，可以通知依赖更新，如果数组中包含着引用类型。会对数组中的引用类型再次进行监控。...因为在created()钩子函数中，页面的DOM还未渲染，这时候也没办法操作DOM，所以，此时如果想要操作DOM，必须将操作的代码放在nextTick()的回调函数中。...优点: 保证性能下限: 虚拟DOM可以经过diff找出最小差异,然后批量进行patch,这种操作虽然比不上手动优化,但是比起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限 无需手动操作DOM...: 虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率 跨平台: 虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作
2025-01-20：使所有元素都可以被 3 整除的最少操作数。用go语言，给定一个整数数组 nums，你可以通过对数组中任意一个元素进行加1或减1的操作。...在这些操作中，目标是使得数组内所有元素都能被3整除。请问你需要的最少操作次数是多少？ 1 <= nums.length <= 50。 1 <= nums[i] <= 50。...解释： 通过以下 3 个操作，数组中的所有元素都可以被 3 整除： 将 1 减少 1 。 将 2 增加 1 。 将 4 减少 1 。...4.对于每个不满足条件的元素，计数器 ans 增加1。 5.返回最终操作次数 ans。 总的时间复杂度： • 遍历整个数组的时间复杂度为 O(n)，其中 n 是数组的长度。...• 在每次遍历中执行常数时间的操作。 • 因此，总的时间复杂度为 O(n)。 总的额外空间复杂度： • 除了输入数组 nums 和一个整型变量 ans 外，并没有使用任何额外的空间。
created：实例已经创建完成，因为他是最早触发的，所以可以进行一些数据、资源的请求。mounted：实例已经挂载完成，可以进行一些DOM操作。...beforeUpdate：可以在这个钩子中进一步的更改状态，不会触发重渲染。updated：可以执行依赖于DOM的操作，但是要避免更改状态，可能会导致更新无线循环。...数组就是使用object.defineProperty 重新定义数组的每一项，那能引起数组变化的方法我们都是知道的，pop 、push 、shift 、unshift 、splice 、sort 、reverse...这七种，只要这些方法执行改了数组内容，我就更新内容就好了，是不是很好理解。...数组里每一项可能是对象，那么我就是会对数组的每一项进行观测，（且只有数组里的对象才能进行观测，观测过的也不会进行观测）vue3：改用proxy ，可直接监听对象数组的变化。
star吗 手写useState useState的使用 useState可以在函数组件中，添加state Hook。...，第二个参数是一个数组，用于监听数组里的元素变化的时候，才会返回一个新的方法。...，需要看看新的依赖数组的每一项和来的依赖数组的每一项的值是否相等 let lastCallback let lastCallbackDependencies function useCallback(callback...上下文（context），然后订阅了这个上下文的组件中，可以拿到上下文中提供的数据或者其他信息。...当监听数组中的元素有变化的时候再执行作为第一个参数的执行函数 原理 原理发现其实和useMemo，useCallback类似，只不过，前面前两个有返回值，而useEffect没有。
问题背景 如上图所示，在菜品领取登记表里，用户可以里输入各个菜品的数量，输入完成后点保存生成json数据，调接口将供应日期放进生成的json数据一并发给后端，后端拿到json数据后修改数据库中的数据。...解决思路 观察菜品领取登记表后，我们发现表中姓名为固定数据，其他字段都是后端返的动态数据，表格的内容也是动态的，每行数据描述了其姓名所对应的菜品以及菜品数量，我们根据这些已知条件整理下思路，将这些数据用...获取供应日期，存进一个变量中。 获取表头数据，存进一个数组中。 获取表格内容，存进一个数组中。 遍历表格内容，将表格中的数据与表头一一对应，存进一个JSON数组中。...将供应日期和表格内容的json数组放进一个对象中，调接口将数据发送给后端。 解决方案 对页面进行分析后，我们得到了解决思路，接下来我们将上述思路转换为代码： 菜品领取登记表的DOM结构如下: 的json数据中，data中json对象的个数，是根据我们生成的json数据中的动态字段数量决定的。 代码实现 知道规律后，我们就可以用js实现这个解析器了。
当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。...侦听器常用场景是状态变化之后做一些额外的DOM操作或者异步操作。...updated（更新后） ：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。...，然后通知视图去更新数组里每一项可能是对象，那么我就是会对数组的每一项进行观测，（且只有数组里的对象才能进行观测，观测过的也不会进行观测）原理Vue 将 data 中的数组，进行了原型链重写。...指向了自己定义的数组原型方法，这样当调用数组api 时，可以通知依赖更新，如果数组中包含着引用类型。会对数组中的引用类型再次进行监控。
，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。...updated（更新后） ：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。...数组里每一项可能是对象，那么我就是会对数组的每一项进行观测，（且只有数组里的对象才能进行观测，观测过的也不会进行观测）vue3：改用proxy ，可直接监听对象数组的变化。...）v-model 可以被用在自定义组件上吗？...）（2）使用场景普通DOM元素进行底层操作的时候，可以使用自定义指令自定义指令是用来操作DOM的。
此时面试官的心里会想到 ，这个·小伙还可以 ，应该看多少过vue3的源码了 6.vue2.x中如何监测数组变化 使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法...这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。...当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。...本来也不难就当一个装逼的知识点吧 12. 组件中的data为什么是一个函数？ 这个问题 确实问的我错不及防 ，但是这还是个事吗？ 一个组件被复用多次的话，也就会创建多个实例。...虚拟Dom以及key属性的作用 这个问题在 某友 面试时问的 ， 记忆犹新，面试官非说我错了 ，不上辩解的我只能屈服 由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。
更快速 : key 的唯一性可以被 Map 数据结构充分利用,相比于遍历查找的时间复杂度 O(n),Map 的时间复杂度仅仅为 O(1)Vue模版编译原理知道吗，能简单说一下吗？...数组就是使用object.defineProperty 重新定义数组的每一项，那能引起数组变化的方法我们都是知道的，pop 、push 、shift 、unshift 、splice 、sort 、reverse...这七种，只要这些方法执行改了数组内容，我就更新内容就好了，是不是很好理解。...数组里每一项可能是对象，那么我就是会对数组的每一项进行观测，（且只有数组里的对象才能进行观测，观测过的也不会进行观测）vue3：改用proxy ，可直接监听对象数组的变化。...）（2）使用场景普通DOM元素进行底层操作的时候，可以使用自定义指令自定义指令是用来操作DOM的。
推荐使用 splice 方法会比较好自定义，因为 slice 可以在数组的任何位置进行删除/添加操作，这部分可以看看我前几天写的一篇文章:【干货】js 数组详细操作方法及解析合集 3....并不会重新渲染整个列表: Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。...列表渲染相关 1. v-for 循环绑定 model input 在 v-for 中可以像如下这么进行绑定，我敢打赌很多人不知道。...如果你想根据循环中的 每一项的数据来判断是否渲染，那么你这样做是对的 : {{ todo...}} 如果你想要 根据某些条件跳过循环，而又跟将要渲染的每一项数据没有关系的话，你可以将 v-if 放在 v-for 的父节点 ： // 根据elseData是否为
推荐使用splice方法会比较好自定义,因为slice可以在数组的任何位置进行删除/添加操作，这部分可以看看我前几天写的一篇文章:【干货】js 数组详细操作方法及解析合集 替换数组/对象 比方说:你想遍历这个数组...并不会重新渲染整个列表: Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。...---- 列表渲染相关 v-for循环绑定model: input在v-for中可以像如下这么进行绑定，我敢打赌很多人不知道。 ...如果你想根据循环中的每一项的数据来判断是否渲染，那么你这样做是对的: {{... todo }} 如果你想要根据某些条件跳过循环，而又跟将要渲染的每一项数据没有关系的话，你可以将v-if放在v-for的父节点： // 根据elseData
created：实例已经创建完成，因为他是最早触发的，所以可以进行一些数据、资源的请求。mounted：实例已经挂载完成，可以进行一些DOM操作。...beforeUpdate：可以在这个钩子中进一步的更改状态，不会触发重渲染。updated：可以执行依赖于DOM的操作，但是要避免更改状态，可能会导致更新无线循环。...数组就是使用object.defineProperty 重新定义数组的每一项，那能引起数组变化的方法我们都是知道的，pop 、push 、shift 、unshift 、splice 、sort 、reverse...数组里每一项可能是对象，那么我就是会对数组的每一项进行观测，（且只有数组里的对象才能进行观测，观测过的也不会进行观测）vue3：改用proxy ，可直接监听对象数组的变化。...，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。
这样当调用数组 api 时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。 5、nextTick 知道吗，实现原理是什么？...mounted 在挂载完成后发生，在当前阶段，真实的 Dom 挂载完毕，数据完成双向绑定，可以访问到 Dom 节点，使用$refs 属性对 Dom 进行操作。...created阶段也可以做一些简单的请求（不操作DOM） 注意：如果是服务端渲染，需要放到created中。因为只支持beforeCreat与created两个钩子。 ️...当我们需要深度监听对象中的属性时，可以打开 deep：true 选项， 这样便会对对象中的每一项进行监听。...(实际的实现可以结合 Vue3.x 源码看。) 该算法中还运用了动态规划的思想求解最长递归子序列。 15、说一下虚拟 Dom 以及 key 属性的作用 由于在浏览器中操作 DOM 是很昂贵的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
