Vue3的组合API中的setup()方法包含了所有的基本内容,包括生命周期,可以在setup()中使用生命周期钩子函数。
①Vue3中Template支持多个根标签,Vue2不支持【跟标签】
②Vue3中的生命周期的挂载钩子是onMounted,需要引入才能使用【钩子的名字变了】
③Vue3引入了tree-shaking,以模块的方式引入api,减小打包体积【更小】
④引入setup
<script> export default {
name: "App",
setup() {
// ...
return {
// ...
}
},
} </script>
如何用:
添加链接描述
Vue模块化开发 高内聚 低耦合
vue是使用的MVVM模式,特点是低耦合
因为vue是组件化开发,各组件间的“关联性”相对小一点,提高了复用性
模块化开发就是将大的文件拆分为许多独立的小文件,按需在不同的组件中导入,降低了代码耦合度,提高了代码复用性。
Vue自定义指令钩子函数的描述
自定义指令钩子函数参数"el"指所绑定的元素,可以直接操作DOM元素。
如修改绑定元素的字体颜色:el.style.color = 'red'。Vue自定义指令 钩子函数
(指令名字,配置对象(属性,函数))
①属性
•el: 指令绑定的元素。 •vm: 拥有该指令的上下文 ViewModel。 •expression: 指令的表达式,
不包括参数和过滤器。 •arg: 指令的参数。 •name: 指令的名字,不包含前缀。 •modifiers:
一个对象,包含指令的修饰符。 •descriptor: 一个对象,包含指令的解析结果
②函数
•bind:只调用一次,在指令第一次绑定到元素上时调用。 •update:
在 bind 之后立即以初始值为参数第一次调用,之后每当绑定值变化时调用,
参数为新值与旧值。 •unbind:只调用一次,在指令从元素上解绑时调用。
<div v-my-directive="someValue"></div> Vue.directive('my-directive',
{
bind: function () {
// 准备工作 // 例如,添加事件处理器或只需要运行一次的高耗任务 },
update: function (newValue, oldValue) {
// 值更新时的工作 // 也会以初始值为参数调用一次 }, unbind: function () { // 清理工作 // 例如,删除 bind() 添加的事件监听器 } })
dom挂载Vue
1.mounted是vue中的一个钩子函数,一般在初始化页面完成后,再对dom节点进行相关操作。但是题例中没有执行dom挂载,所以mounted不会执行
2.由于Vue实例没有执行DOM挂载,所以不会执行mounted钩子函数
未挂载
new Vue({
data: {
a: 'first', b: 'second' },
created: function () {
console.log(this.a) },
mounted(){
console.log(this.b) }
})
’first’
挂载后
new Vue({
el: '#APP',
data: {
a: 'first', b: 'second' },
created: function () {
console.log(this.a) },
mounted(){
console.log(this.b) }
})
这样就执行了dom挂载了?
v-model: 双向绑定
v-on(@):绑定事件
v-bind(:): 绑定dom
Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境,所以使它具有了跨平台的能力,比如说浏览器平台、Weex、Node 等。
路由问题 全局 局部 拿数据
**router其实是VueRouter的一个实例,所以它是一个全局对象,
包含了所有的子对象和属性,而route是正在跳转的这个路由的局部对象,可以获取这个正在跳转的路由的
name,path,params,query等**
this.$router 全局的路由对象,options.routes包括所有的路由路径
, this.$router.push() this.$router.go()
this.$route 本页面的路由对象, 当前页的 url地址, 当前页的传参 params query
$nextTick是什么、如何用、原理是什么?
①了解一个前提,vue更新dom时是异步更新的。简单说就是,有一个队列,里面都是等着更新的数据,数据都变完了,dom再跟新。就是异步更新。需要使用$nextTick()原因是Vue是异步渲染
②使用场景:如果想要在修改数据后立刻得到更新后的DOM结构,可以使用Vue.nextTick()、、在created等虚拟DOM没有完成挂载的钩子函数中,可以把操作语句放在$nextTick的回调函数中
③原理:简单理解就是一个setTimeout函数