关于Vue

最新推荐文章于 2023-01-09 17:37:31 发布

哪吒U

最新推荐文章于 2023-01-09 17:37:31 发布

阅读量83

点赞数

分类专栏：关于Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_50580285/article/details/116722294

版权

关于Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue解决了什么问题?

虚拟dom：操作dom时非常耗性能的，不再使用原生的dom操作节点，极大的解放dom操作，但具体操作的还是dom，不过是换了一种方式。
视图、数据、结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。
组件化：把一个单页应用中的各种模块拆分到一个一个单独的组件中，便于开发，以及后期的维护

MVVM的理解?

MVVM就是Model-View-ViewModel的缩写，MVVM将视图和业务逻辑分开。
View：视图层，Model数据模型，而ViewModel是把两者建立通信的桥梁。
在MVVM框架下，View和Model之间没有直接的联系，而是通过ViewModel进行交互。View和ViewModel之间以及Model和ViewModel之间的交互都是双向的，因此view数据的变化会同步到Model中，而Model数据的变化也会立即反映到View上。可以说它们两者是实时更新的，互相影响。 ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的同步工作完全是自动的，因此开发者只需要关注业务逻辑，不需要手动操作DOM，也不需要关注数据状态的同步问题，这些都由MVVM统一管理。

如何实现一个自定义组件?

==<font color=#f000>自定义组件</font>==：
  创建子组件的文件，建立组件的模板，把架子搭起来，也就是在子组件中写好<template>视图层，<script>逻辑层<style>css样式层。然后定义好props里面的数据，实现子组件需要的逻辑代码后，也就封装好了，然后直接调用即可。调用的花import引入，同时在父组件<script>（逻辑层）中的components这个对象中写入组件名称，最后挂载到父组件的template中即可。

不同组件之间是如何通信的？

请永远牢记vue是单向数据流
组件通信：

①props / $emit
父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。
②$children / $parent
this.$children[0].msg = "hello world" //父组件修改子组件data中的数据
this.$parent.mag //子组件拿到父组件data中的数据

$children的值是数组，$parent的值是个对象
注意：$parent，$children它们的目的是作为访问数组的应急方法，更推荐用props和events实现父子组件通信。
③provide / inject
这是vue2.2.0新增的api，简单来说就是父组件中通过provide来提供变量，然后再子组件中通过inject来注入变量。
//父组件
export default{
    name:"A",
    provide:{
        for:"demo"
    },
    components:{
        comB
    }
}

//子组件
export default{
    name:"B",
    inject:["for"],
    data(){
        demo:this.for
    }
}复制代码
④ref / refs
ref：如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例，可通过实例直接调用组件的方法或访问数据。
//父组件
<template>
    <component-a ref="comA"></component-a>
</template>
<script>
    export default{
        mounted(){
            const comA = this.$refs.comA;
            console.log(comA.name)//Vue.js
            comA.sayHello() //hello
        }
    }
</script>
 //子组件
export default{
    data(){
        return {
            name:"Vue.js"
        }
    },
    methods:{
        sayHello(){
            console.log("hello")
        }
    }
} 
⑤eventBus(Bus总线)：
//首先在src中创建一个Bus文件夹 => index.js
import Vue from "vue";
export default new Vue({
    
})

//子组件1(发送数据的组件)
<button @click="add()">点击</button>
import Bus from "@/Bus"
add(){
    Bus.$emit("add",this.content);
}

//子组件2(接受数据的组件)
<p>{{tit}}</p>
import Bus from "@/Bus";
created(){
    Bus.$on("add",(data) => {
        this.tit = data;
    })
} 
⑥Vuex；
⑦LocalStorage；
⑧$attrs / $listeners
     将数据挂在到子组件的标签上去后，在子组件中使用this.$attrs直接获取到所有挂载的数据，返回的是一个对象。

nextTick 的理解?

使用nextTick的原因：Vue是异步修改DOM的，并且不鼓励开发者直接接触DOM，但是有时候需要必须对数据更改后的DOM元素做相应的处理，但是获取到的DOM数据并不是更改后的数据，这时候就需要this.$nextTick()；
原理：Vue通过异步队列控制DOM更新和nextTick回调函数先后执行的方式。

使用：
//HTML
<button @click="change()">按钮</button><h1 ref="gss">{{msg}}</h1>
//JS
export default{
    name:"app",
    data(){
        return {
            msg:"123"
        }
    },
    methods:{
        change(){
            this.msg = "456";
            console.log(this.refs["gss"].innerHTML)//123
            this.$nextTick(function(){
                console.log(this.refs["gss"].innerHTML)//456
            })
        }
    }
    
}