去柬埔寨做网站是传销吗,下载了wordpress进不了网页,最新被百度收录的网站,企业微信app开发一 .v-if和v-show的区别
v-if 和 v-show 是 Vue.js 中两个常用的条件渲染指令#xff0c;它们都可以根据条件决定是否渲染某个元素。但是它们之间存在一些区别。
语法#xff1a;v-if 和 v-show 的语法相同#xff0c;都接收一个布尔值作为参数。
div v-ifshow…一 .v-if和v-show的区别
v-if 和 v-show 是 Vue.js 中两个常用的条件渲染指令它们都可以根据条件决定是否渲染某个元素。但是它们之间存在一些区别。
语法v-if 和 v-show 的语法相同都接收一个布尔值作为参数。
div v-ifshowHello, World!/div
div v-showshowHello, World!/div条件渲染v-if 会根据条件决定是否渲染整个元素如果条件为 false则元素不会被渲染v-show 会根据条件决定是否显示元素如果条件为 false则元素会隐藏但仍然存在于 DOM 中。
div v-ifshowHello, World!/div
div v-showshowHello, World!/div性能v-if 会根据条件决定是否渲染整个元素如果条件为 false则元素不会被渲染这种情况下Vue.js 会销毁和重建元素性能较差v-show 会根据条件决定是否显示元素如果条件为 false则元素会隐藏但仍然存在于 DOM 中这种情况下Vue.js 不会销毁和重建元素性能较好。
总结v-if 和 v-show 都可以根据条件决定是否渲染某个元素但它们之间存在一些区别。v-if 会根据条件决定是否渲染整个元素如果条件为 false则元素不会被渲染这种情况下Vue.js 会销毁和重建元素性能较差v-show 会根据条件决定是否显示元素如果条件为 false则元素会隐藏但仍然存在于 DOM 中这种情况下Vue.js 不会销毁和重建元素性能较好。在实际使用中可以根据具体需求选择合适的指令。
二.如何理解mvvm
MVVMModel-View-ViewModel是一种前端开发模式它将数据与视图分离从而提高代码的可维护性和可扩展性。
在 MVVM 模式中Model 表示数据模型View 表示视图ViewModel 表示视图模型。数据模型负责存储数据视图负责展示数据视图模型负责将数据与视图进行绑定。
在 MVVM 模式中视图模型负责将数据与视图进行绑定。当数据模型中的数据发生变化时视图模型会自动更新视图从而实现数据与视图的双向绑定。
以下是一个简单的 MVVM 示例
templatedivinput v-modelsearchText placeholderSearch /pSearch text: {{ searchText }}/p/div
/templatescript
export default {data() {return {searchText: };}
};
/script在这个示例中searchText 是数据模型input 和 p 是视图v-model 是视图模型。当用户在输入框中输入内容时searchText 会自动更新视图中的内容也会自动更新。
总结MVVM 是一种前端开发模式它将数据与视图分离从而提高代码的可维护性和可扩展性。在 MVVM 模式中视图模型负责将数据与视图进行绑定实现数据与视图的双向绑定。 model-view-viewmodel的缩写是一种设计思想。 model就是数据模型用于定义数据修改和操作。 view是视图。 viewmodel是连接view和model的桥梁。 当数据改变时viewmodel通过监听到数据变化自动更新视图当用户操作视图时viewmodel可以监听视图变化通知数据进行改动。 viewmodel通过双向绑定把view和model连接起来他们之间的同步是自动的。 三.组件生命周期
Vue 组件的生命周期指的是组件从创建到销毁的一系列过程可以分为创建、挂载、更新、销毁四个阶段。 创建阶段在创建阶段Vue 会进行一些初始化工作如初始化数据、事件、计算属性等。 挂载阶段在挂载阶段Vue 会根据模板编译生成 DOM并将数据与 DOM 进行绑定。 更新阶段在更新阶段Vue 会根据数据的变化更新 DOM。 销毁阶段在销毁阶段Vue 会进行一些清理工作如解绑事件、计算属性等。
以下是 Vue 组件的生命周期钩子函数 beforeCreate在创建阶段之前调用此时 Vue 实例尚未被创建。 created在创建阶段之后调用此时 Vue 实例已经被创建但 DOM 尚未被编译。 beforeMount在挂载阶段之前调用此时 DOM 尚未被编译。 mounted在挂载阶段之后调用此时 DOM 已经被编译但尚未被渲染。 beforeUpdate在更新阶段之前调用此时 DOM 已经被渲染但数据尚未被更新。 updated在更新阶段之后调用此时 DOM 已经被更新但尚未被渲染。 beforeUnmount在销毁阶段之前调用此时 DOM 已经被渲染但尚未被解绑。 unmounted在销毁阶段之后调用此时 DOM 已经被解绑Vue 实例已被销毁。
总结Vue 组件的生命周期指的是组件从创建到销毁的一系列过程可以分为创建、挂载、更新、销毁四个阶段。在不同的生命周期阶段Vue 会调用不同的生命周期钩子函数我们可以通过这些钩子函数来执行一些特定的操作。 简言之 创建 beforeCreate:属性和方法都不能使用 created:实例创建完成之后可以使用和修改数据但页面没有被渲染 挂载 beforemount:虚拟dom创建完成即将渲染 mounted:把编译好的模板挂载到页面 更新 beforeUpdate:组件更新之前使用数据是新的页面上的数据是旧的组件即将更新 updated:render重新渲染数据和页面都是新的 销毁 beforeDestory:清除定时器等操作 destroyed:组件被销毁 使用keep-alive时多出两个 activited:组件激活时 deactivited:组件销毁时 四.在created和mounted去请求数据有什么区别
在 Vue.js 中created 和 mounted 是两个常用的生命周期钩子函数都可以用来请求数据。但是它们之间存在一些区别。 调用时间created 钩子函数在 Vue 实例被创建后立即调用此时 Vue 实例的 data 和 methods 属性已经初始化但 DOM 尚未被编译mounted 钩子函数在 DOM 被编译后调用此时 Vue 实例的 data 和 methods 属性已经初始化DOM 已经渲染。 请求数据在 created 钩子函数中请求数据如果请求失败可能会导致 Vue 实例无法被创建在 mounted 钩子函数中请求数据即使请求失败也不会影响 Vue 实例的创建和渲染。 页面加载速度在 created 钩子函数中请求数据可能会导致页面加载速度变慢因为请求数据需要时间在 mounted 钩子函数中请求数据可以确保在页面加载完成后立即请求数据从而提高页面加载速度。
总结created 和 mounted 都可以用来请求数据但它们之间存在一些区别。created 钩子函数在 Vue 实例被创建后立即调用此时 Vue 实例的 data 和 methods 属性已经初始化但 DOM 尚未被编译mounted 钩子函数在 DOM 被编译后调用此时 Vue 实例的 data 和 methods 属性已经初始化DOM 已经渲染。在实际使用中可以根据具体需求选择合适的钩子函数来请求数据。 created:渲染前调用先初始化数据。 mounted:渲染后调用请求数据可能会出现闪屏created不会。 请求的数据对dom有影响使用created与dom无关可以放在mounted。 五.vue组件通信
Vue 组件通信主要有以下几种方式
props 和 $emit通过 props父组件可以将数据传递给子组件通过 $emit子组件可以将数据传递给父组件。
!-- 父组件 --
templatedivchild-component :messageparentMessage/child-component/div
/templatescript
import ChildComponent from ./ChildComponent.vue;export default {components: {ChildComponent},data() {return {parentMessage: Hello from parent};}
};
/script!-- 子组件 --
templatediv{{ message }}button clicksendMessageSend message to parent/button/div
/templatescript
export default {props: [message],methods: {sendMessage() {this.$emit(message-sent, Hello from child);}}
};
/script.sync 修饰符在 Vue 2.3.0 版本中引入了 .sync 修饰符可以简化子组件修改父组件数据的操作。
!-- 父组件 --
templatedivchild-component :message.syncparentMessage/child-component/div
/templatescript
import ChildComponent from ./ChildComponent.vue;export default {components: {ChildComponent},data() {return {parentMessage: Hello from parent};}
};
/script!-- 子组件 --
templatediv{{ message }}button clicksendMessageSend message to parent/button/div
/templatescript
export default {props: [message],methods: {sendMessage() {this.message Hello from child;this.$emit(update:message, Hello from child);}}
};
/scriptVuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式与库。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。
// store.js
import Vue from vue;
import Vuex from vuex;Vue.use(Vuex);export default new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count;}},actions: {increment(context) {context.commit(increment);}},modules: {count: {state: {count: 0},mutations: {increment(state) {state.count;}},actions: {increment(context) {context.commit(increment);}}}}
});$root 和 $parent通过 $root 和 $parent可以访问到 Vue 实例的根节点和父节点。
!-- 子组件 --
templatediv{{ rootMessage }}{{ parentMessage }}/div
/templatescript
export default {inject: [rootMessage, parentMessage],created() {console.log(this.$root); // 访问根节点console.log(this.$parent); // 访问父节点}
};
/script总结Vue 组件通信主要有 props 和 $emit、.sync 修饰符、Vuex、$root 和 $parent 等方式。在实际项目中可以根据具体需求选择合适的通信方式。 简言之 父传子:props,$ref --引用信息对象会注册在父组件$refs对象上 子传父:$emit—子组件绑定自定义事件子组件绑定接收 兄弟传:全局事件总线$bus用on和emit来进行数据传输 六.keep-alive
keep-alive 是 Vue.js 提供的一个生命周期钩子函数它会在组件被销毁后将其缓存到内存中当再次访问时会从缓存中取出组件实例而不是重新创建一个新的实例。这样可以减少内存的消耗提高页面的加载速度。
keep-alive 主要用于需要频繁切换的页面如首页、列表页等。当用户在两个页面之间频繁切换时使用 keep-alive 可以避免频繁地创建和销毁组件实例从而提高页面的加载速度。
要使用 keep-alive需要遵循以下步骤
在需要缓存的组件上添加 keep-alive 属性。
templatediv!-- 页面内容 --/div
/templatescript
export default {name: MyComponent,keepAlive: true
};
/script在 keep-alive 生命周期钩子函数中可以进行一些缓存数据的处理。
export default {name: MyComponent,keepAlive: true,mounted() {console.log(Component mounted);},destroyed() {console.log(Component destroyed);}
};注意keep-alive 主要用于需要频繁切换的页面对于一些需要根据用户操作进行缓存的数据可以使用 Vuex 等状态管理库进行管理。 是vue的内置组件包裹组件时会缓存不活跃的组件实例。 防止重复渲染、减少加载时间和性能消耗。 七. axios如何封装
Axios 是一个基于 Promise 的 HTTP 客户端用于在浏览器和 Node.js 中发起 HTTP 请求。 Axios 具有以下特点
支持 Promise API支持拦截器支持请求和响应的数据处理支持取消请求支持自动转换 JSON
下面是一个简单的 Axios 封装示例
安装 Axios
npm install axios创建 axios.js 文件封装 Axios
import axios from axios;const instance axios.create({// 基本 URLbaseURL: https://api.example.com,timeout: 5000,
});// 请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;},function (error) {// 对请求错误做些什么return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use(function (response) {// 对响应数据做点什么return response;},function (error) {// 对响应错误做点什么return Promise.reject(error);}
);export default instance;在需要使用 Axios 的地方引入封装好的 Axios
import axios from ./axios;axios.get(/users).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});在这个示例中我们创建了一个名为 instance 的 Axios 实例并设置了请求拦截器和响应拦截器。然后我们将封装好的 Axios 实例导出以便在其他地方使用。
注意这个示例仅作为参考实际项目中可能需要根据具体需求进行调整。 下载axios----创建实例----封装请求和响应拦截器----封装接口-----使用 八.vue路由传参
Vue.js 中的路由传参主要有以下几种方式
使用 query 参数在路由的路径中添加 query 参数如 /search?keywordxxx。在组件中可以通过 this.$route.query 获取 query 参数。
// router.js
import VueRouter from vue-router;
import Search from ./components/Search.vue;const routes [{path: /search,name: Search,component: Search,props: true}
];const router new VueRouter({routes
});export default router;!-- Search.vue --
templatedivh2Search/h2pKeyword: {{ keyword }}/p/div
/templatescript
export default {props: [keyword]
};
/script使用 props在路由的 props 属性中定义需要传递的参数如 { keyword: String }。在组件中可以通过 this.$route.params 获取 params 参数。
// router.js
import VueRouter from vue-router;
import Search from ./components/Search.vue;const routes [{path: /search/:keyword,name: Search,component: Search,props: {keyword: String}}
];const router new VueRouter({routes
});export default router;!-- Search.vue --
templatedivh2Search/h2pKeyword: {{ keyword }}/p/div
/templatescript
export default {props: [keyword]
};
/script使用 to 属性在路由的 to 属性中可以使用 { propName: propValue } 的形式传递参数。在组件中可以通过 this.$route.params 获取 params 参数。
// router.js
import VueRouter from vue-router;
import Search from ./components/Search.vue;const routes [{path: /search,name: Search,component: Search,to: {name: Search,params: {keyword: xxx}}}
];const router new VueRouter({routes
});export default router;!-- Search.vue --
templatedivh2Search/h2pKeyword: {{ keyword }}/p/div
/templatescript
export default {props: [keyword]
};
/script总结Vue.js 中的路由传参主要有使用 query 参数、使用 props 和使用 to 属性三种方式。在实际项目中可以根据具体需求选择合适的传参方式。 params传参:this.$router.push({name:,params:{}}) this.$route.params.id 路由属性传参 this.$router.push({name:/${item.id}}) 路由配置{path:/index:id} query传参 this.$router.push({name:index,query:{}}) 九.路由hash模式和history有啥区别
路由的 hash 模式和 history 模式的主要区别在于 URL 的表现形式和浏览器的历史记录。
URL 表现形式
hash 模式URL 中会带有 # 符号如 http://example.com/#/search。history 模式URL 中不会带有 # 符号如 http://example.com/search。
浏览器历史记录
hash 模式在浏览器中点击回退按钮会返回到上一个页面而不是跳转到上一个 URL。history 模式在浏览器中点击回退按钮会跳转到上一个 URL而不是返回到上一个页面。
总结hash 模式和 history 模式的主要区别在于 URL 的表现形式和浏览器的历史记录。在实际项目中可以根据具体需求选择合适的路由模式。 hash地址上有#history没有 地址栏回车刷新时hash会加载相应页面history会报404 hash支持低版本浏览器因为H5新增的API hash不会重新加载页面 history有历史记录可以通过pushState和replaceState(0)去修改历史记录并不立刻发送请求 history需要后台配置 十.路由拦截
Vue.js 中的路由拦截主要通过导航守卫来实现。导航守卫是 Vue Router 提供的全局导航守卫可以在路由导航过程中执行一些操作如拦截导航、改变导航参数等。
Vue Router 提供了以下几种导航守卫
beforeEach在导航守卫中可以在导航到新路由之前执行一些操作。
// router.js
import VueRouter from vue-router;
import Search from ./components/Search.vue;const routes [{path: /search,name: Search,component: Search,beforeEach: (to, from, next) {// 在这里可以执行一些操作如验证用户是否登录if (!userLoggedIn) {next({ name: Login });} else {next();}}}
];const router new VueRouter({routes
});export default router;beforeEnter在导航守卫中可以在导航到新路由之前执行一些操作。
// router.js
import VueRouter from vue-router;
import Search from ./components/Search.vue;const routes [{path: /search,name: Search,component: Search,beforeEnter: (to, from, next) {// 在这里可以执行一些操作如验证用户是否登录if (!userLoggedIn) {next({ name: Login });} else {next();}}}
];const router new VueRouter({routes
});export default router;beforeRouteEnter在导航守卫中可以在导航到新路由之前执行一些操作。
// router.js
import VueRouter from vue-router;
import Search from ./components/Search.vue;const routes [{path: /search,name: Search,component: Search,beforeRouteEnter: (to, from, next) {// 在这里可以执行一些操作如验证用户是否登录if (!userLoggedIn) {next({ name: Login });} else {next();}}}
];const router new VueRouter({routes
});export default router;beforeRouteUpdate在导航守卫中可以在导航到新路由之前执行一些操作。
// router.js
import VueRouter from vue-router;
import Search from ./components/Search.vue;const routes [{path: /search,name: Search,component: Search,beforeRouteUpdate: (to, from, next) {// 在这里可以执行一些操作如验证用户是否登录if (!userLoggedIn) {next({ name: Login });} else {next();}}}
];const router new VueRouter({routes
});export default router;beforeRouteLeave在导航守卫中可以在导航离开当前路由之前执行一些操作。
// router.js
import VueRouter from vue-router;
import Search from ./components/Search.vue;const routes [{path: /search,name: Search,component: Search,beforeRouteLeave: (to, from, next) {// 在这里可以执行一些操作如保存当前路由信息saveCurrentRouteInfo();next();}}
];const router new VueRouter({routes
});export default router;总结Vue.js 中的路由拦截主要通过导航守卫来实现。导航守卫是 Vue Router 提供的全局导航守卫可以在路由导航过程中执行一些操作如拦截导航、改变导航参数等。在实际项目中可以根据具体需求使用导航守卫来实现 router.before e ach((to,from,next){}) 十一.vue的动态路由
在路由配置里设置meta属性扩展权限相关字段在路由导航守卫里判断这个权限标识实现动态的增加和跳转路由
十二…如何解决刷新后二次加载路由
window.location.reload()matchercosnt routercreateRouter()export function resetRouter(){const newRoutercreatRouter()router.matchernewRouter.matcher}十三.vuex刷新页面数据丢失
vuex会重新获取数据
把数据保存在浏览器缓存里cookie、localstorage、session
页面刷新时再次请求数据动态更新vuex里面的数据
十四.computed和watch区别
computed 和 watch 是 Vue.js 中两个重要的属性它们都可以实现数据的双向绑定但它们之间存在一些区别。 定义方式computed 是通过 Object.defineProperty() 方法来定义的而 watch 是通过 Vue.prototype.watch 方法来定义的。 依赖收集computed 属性会进行依赖收集当依赖的数据发生变化时会自动更新视图而 watch 属性不会进行依赖收集需要手动触发视图更新。 缓存computed 属性会缓存计算结果当依赖数据发生变化时会重新计算而 watch 属性不会缓存计算结果每次都会重新计算。 性能computed 属性性能比 watch 属性高因为它进行了依赖收集而 watch 属性需要手动触发视图更新。
总结computed 和 watch 都可以实现数据的双向绑定但它们之间存在一些区别。computed 属性会进行依赖收集当依赖的数据发生变化时会自动更新视图而 watch 属性不会进行依赖收集需要手动触发视图更新。computed 属性会缓存计算结果当依赖数据发生变化时会重新计算而 watch 属性不会缓存计算结果每次都会重新计算。computed 属性性能比 watch 属性高因为它进行了依赖收集。 computed:计算属性支持缓存以来的属性值发生变化计算属性会重新计算否则用缓存不支持异步第一次加载就监听函数中必须有return watch:监听属性监听data中数据的变化不支持缓存支持异步第一次加载不监听可以不用有return 十五.vuex使用场景和属性
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 适用于需要共享状态的应用程序。
Vuex 具有以下属性 状态stateVuex 通过 state 属性来定义应用程序的状态。状态可以是嵌套的对象也可以是基本的数据类型。 突变mutationsVuex 通过 mutations 属性来定义状态的突变。突变是同步的并且只能通过 commit 方法来触发。 操作actionsVuex 通过 actions 属性来定义异步操作。操作可以触发突变也可以执行其他异步操作。 模块modulesVuex 通过 modules 属性来定义模块。模块可以包含自己的状态、突变、操作和模块。
Vuex 适用于以下场景 单页面应用程序Vuex 适用于需要共享状态的单页面应用程序。 多组件应用程序Vuex 适用于需要共享状态的多组件应用程序。 需要状态持久化的应用程序Vuex 适用于需要状态持久化的应用程序。 需要权限控制的应用程序Vuex 适用于需要权限控制的应用程序。
使用 Vuex 的步骤 安装 Vuex 使用 npm 或 yarn 安装 Vuex npm install vuex --save或 yarn add vuex创建 Vuex store 在项目中创建一个名为 store.js 的文件并在其中创建一个 Vuex store import Vue from vue;
import Vuex from vuex;Vue.use(Vuex);export default new Vuex.Store({state: {},mutations: {},actions: {},modules: {}
});定义状态、突变、操作和模块 在 store.js 文件中可以定义状态、突变、操作和模块。例如 state: {count: 0
},
mutations: {increment(state) {state.count;}
},
actions: {increment(context) {context.commit(increment);}
},
modules: {count: {state: {count: 0},mutations: {increment(state) {state.count;}},actions: {increment(context) {context.commit(increment);}}}
}引入 store 到 main.js 在 main.js 文件中引入 store.js 并将其添加到 Vue 实例中 import Vue from vue;
import App from ./App.vue;
import store from ./store;new Vue({store,render: h h(App)
}).$mount(#app);使用 mapState、mapGetters、mapMutations 和 mapActions 在 Vue 组件中可以使用 mapState、mapGetters、mapMutations 和 mapActions 辅助函数来简化代码。例如 import { mapState, mapGetters, mapMutations, mapActions } from vuex;export default {computed: {...mapState([count])},methods: {...mapMutations([increment]),...mapActions([increment])}
};总结Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 适用于需要共享状态的应用程序如单页面应用程序、多组件应用程序 state:存储变量 getters:state的计算属性 mutations:提交更新数据的方法同步 actions:异步操作 modules:模块化vuex 用户个人信息、购物车等 十六.vue双向绑定的原理
Vue.js 中的双向绑定是通过 Object.defineProperty() 方法实现的。这个方法可以让我们在访问或修改一个属性时执行一些自定义操作。Vue.js 利用这个方法实现了数据的双向绑定。
具体来说Vue.js 会将数据对象中的每个属性转换为 getter 和 setter从而实现数据的双向绑定。当数据对象中的属性被访问或修改时getter 和 setter 会被触发从而更新视图。
以下是一个简单的示例
class Vue {constructor(data) {this.data data;for (const key in data) {Object.defineProperty(this, key, {get() {return this.data[key];},set(value) {this.data[key] value;}});}}
}const vm new Vue({data: {count: 0}
});console.log(vm.count); // 输出 0
vm.count 1;
console.log(vm.count); // 输出 1在这个示例中我们创建了一个简单的 Vue 类它将数据对象中的每个属性转换为 getter 和 setter。当我们访问或修改 vm.count 时getter 和 setter 会被触发从而更新视图。
Vue.js 利用这个原理实现了数据的双向绑定从而实现数据和视图的同步。 通过数据劫持结合发布者订阅者模式利用object.defineProperty()劫持各个属性的setter和getter在数据发生变化时发布消息给订阅者触发相应的监听回调渲染视图。 十七.diff和虚拟dom
diff 和虚拟 DOM 是前端性能优化的重要技术。diff 算法用于计算新旧 DOM 之间的差异从而实现最小化页面重排和重绘。虚拟 DOM 是一种模拟 DOM 的技术它将实际 DOM 转换为虚拟 DOM然后在虚拟 DOM 上进行操作最后将虚拟 DOM 转换回实际 DOM。
diff 算法的核心思想是将新旧 DOM 进行比较找出它们之间的差异然后将差异应用到实际 DOM 上。diff 算法的实现方式有很多如深度优先搜索DFS、广度优先搜索BFS等。
虚拟 DOM 的实现方式是将实际 DOM 转换为虚拟 DOM然后将虚拟 DOM 存储在内存中。当需要更新 DOM 时先将新的虚拟 DOM 转换回实际 DOM然后将新 DOM 与旧 DOM 进行比较找出差异最后将差异应用到实际 DOM 上。
以下是一个简单的示例
// 假设这是实际 DOM
const oldDom document.createElement(div);
oldDom.innerHTML pHello, World!/p;// 创建虚拟 DOM
const vdom {type: div,props: {},children: [{type: p,props: {},children: [Hello, World!]}]
};// 将虚拟 DOM 转换回实际 DOM
const newDom createElement(vdom);// 比较新旧 DOM找出差异
const patches diff(oldDom, newDom);// 将差异应用到实际 DOM 上
applyPatches(oldDom, patches);在这个示例中我们首先创建了一个实际 DOM 和一个虚拟 DOM。然后我们将虚拟 DOM 转换回实际 DOM并比较新旧 DOM找出差异。最后我们将差异应用到实际 DOM 上。
通过使用 diff 和虚拟 DOM我们可以实现前端性能优化减少页面重排和重绘。 虚拟dom描述元素与元素之间的关系创建的一个js对象。 如果组件内有响应的数据数据发生改变时render函数会生成一个新的虚拟dom新的虚拟dom会和旧的虚拟dom进行比对找到需要修改的虚拟dom内容然后去对应的真实dom中修改。 diff是虚拟dom对比时用的返回一个patch对象来存储两个节点不同的地方最后用patch里的记录信息更新真实dom。 十八.vue和jquery的区别
Vue.js 和 jQuery 都是前端流行的 JavaScript 库但它们之间存在一些关键区别。 核心思想Vue.js 的核心思想是数据绑定和视图渲染而 jQuery 的核心思想是选择器、操作 DOM 和事件处理。 语法Vue.js 使用基于 HTML 的模板语法而 jQuery 使用基于 CSS 的选择器语法。 数据绑定Vue.js 支持数据双向绑定而 jQuery 不支持。 视图渲染Vue.js 支持组件化和响应式视图而 jQuery 不支持。 性能Vue.js 的性能通常比 jQuery 更高因为它使用了虚拟 DOM 和优化了 DOM 操作。 社区支持Vue.js 拥有庞大的社区支持而 jQuery 的社区支持正在逐渐减少。 兼容性Vue.js 支持现代浏览器而 jQuery 支持旧版浏览器。
总结Vue.js 和 jQuery 都是前端流行的 JavaScript 库但它们之间存在一些关键区别。Vue.js 更注重数据绑定和视图渲染而 jQuery 更注重选择器、操作 DOM 和事件处理。在性能、社区支持和兼容性等方面Vue.js 通常比 jQuery 更具优势。 原理不同:vue就是数据绑定jq时先获取dom在处理。 着重点不同:vue是数据驱动jq着重于页面。 操作不同 十九.vuex的响应式处理
触发事件的时候会通过dispatch来访问action中的方法actions中的commit会触发mutations中的方法从而修改state里的值通过getter把数据更新到视图
