Vue知识点总复习一

2021-12-01 本文已影响0人似朝朝我心

Vue概念理解

构建用户界面：将一个个数据变成页面展现出来给用户看。
组件化模式开发：将一个完整页面分割成几个大小不一的板块进行遍写开发，进行了板块分离后，板块将会被封装成一个盒子，互不影响。

板块还可以复用，一个.vue文件就是一个组件，一个组件包含三要素HTML的template模板，样式表css，脚本Js。
渐进式框架：按需引入，从小到大、从易到难。
命令式编程：被动（代码自上而下一步步按死规矩、按顺序执行，纯js）
声明式编程：主动、灵活（代码不需要按顺序执行）

比如老师渴了要喝水的例子。

命令式（老师吩咐你执行，你处于被动）：“老师渴了，xxx同学，你先站起来，凳子往后挪一下，把讲台上的水杯拿去开水间，给老师装满水，然后把茶叶烫一下，再泡。”

声明式（主动递水）：“老师你喝水！”

虚拟dom理解:其实就是三个环节，数据---虚拟dom---真实页面，直接将虚拟dom这个环节看成一个数据的中转缓存站或者是一个桥梁，将拿到的数据先经过虚拟dom进行第一轮的加工，加工过后，虚拟dom的数据就变成真正的dom，然后就可以进行页面的渲染，显示界面。

diff算法：差异对比算法，当数据发生变化时，vue是这样更新节点的，找到要更新的数据进行对应更新，计算出虚拟dom中被改变的部分,然后针对该部分进行原生DOM操作,而不用重新渲染整个页面。

vue的cdn版本引入：

开发版本：有报错提示信息，编写代码的时候用，vue.js未经过压缩。
生产版本：没有报错提示，是项目上线的时候采用，vue.min.js经过压缩。

将 Vue 应用挂载到一个 DOM 元素上(绑定容器)。

传统方式：

vue3.0的写法：先创建vue应用，然后挂载到跟节点上作为渲染的起点。

<div id="app">
  {{ message }}
</div>

const App = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(App).mount('#app') //关联容器

data 选项是一个函数，返回一个对象，Vue 在创建新组件实例的过程中调用此函数。

computed对比methods

computed 依赖缓存、重新取值
methods 重新渲染、重新调用

可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

监听属性 watch

watch 来查看data函数当中响应数据的变化。

全局配置: Vue.config.productionTip 阻止 vue 在启动时生成生产提示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            Vue.config.productionTip = false
        </script>
    </body>
</html>

一个容器只能对应一个vue实例，当多个同名容器对应一个实例，Vue默认是自上而下执行，只会在第一个容器生效。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        
        <!-- 引入vue3.0 -->
        <script src="https://unpkg.com/vue@next"></script>
        <title></title>
    </head>
    <body>
        <!-- 容器1 -->
        <div id="app">
          {{ message }}
        </div>
        
        <!-- 容器2 -->
        <div id="app">
          {{ message }}
        </div>
        
        <!-- 容器3 -->
        <div id="app">
          {{ message }}
        </div>
        <script type="text/javascript">
            const App = {
              data() {
                return {
                  message: 'Hello Vue!!'
                }
              }
            }
            
            Vue.createApp(App).mount('#app')
        </script>
    </body>
</html>

多个vue实例对应同一个容器的情形，也只会在最先定义的容器生效：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        
        <!-- 引入vue3.0 -->
        <script src="https://unpkg.com/vue@next"></script>
        <title></title>
    </head>
    <body>
        <!-- 容器1 -->
        <div id="app">
          {{ message }} {{message1}} {{message2}}
        </div>

        <script type="text/javascript">
            const App = {
              data() {
                return {
                  message: 'Hello Vue!!'
                }
              }
            }
            
            Vue.createApp(App).mount('#app')
            const App1 = {
              data() {
                return {
                  message1: 'this is a nice day'
                }
              }
            }
            
            Vue.createApp(App1).mount('#app')
            
            const App2 = {
              data() {
                return {
                  message2: 'beautiful day!'
                }
              }
            }
            
            Vue.createApp(App2).mount('#app')
        </script>
    </body>
</html>

所以vue实例和容器只能是一对一的关系。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        
        <!-- 引入vue3.0 -->
        <script src="https://unpkg.com/vue@next"></script>
        <title></title>
    </head>
    <body>
        <!-- 容器1 -->
        <div id="app">
          {{ message }} 
        </div>
        
        <!-- 容器1 -->
        <div id="app2">
          {{message1}} 
        </div>
        
        <!-- 容器1 -->
        <div id="app3">
         {{message2}}
        </div>

        <script type="text/javascript">
            const App = {
              data() {
                return {
                  message: 'Hello Vue!!'
                }
              }
            }
            
            Vue.createApp(App).mount('#app')
            const App1 = {
              data() {
                return {
                  message1: 'this is a nice day'
                }
              }
            }
            
            Vue.createApp(App1).mount('#app2')
            
            const App2 = {
              data() {
                return {
                  message2: 'beautiful day!'
                }
              }
            }
            
            Vue.createApp(App2).mount('#app3')
        </script>
    </body>
</html>

vue的胡子语法：即使未经data函数定义数据，{{}}双大括号里是支持js表达式和运算符的。

<div id="app">
          {{1+1}}
          {{10*2}}
          {{Date.now()}}
          {{message.toUpperCase()}}
          {{a?'true':'false'}}
        </div>

        <script type="text/javascript">
            const App = {
              data() {
                return {
                  message: 'Hello Vue!!'
                }
              }
            }
            
            Vue.createApp(App).mount('#app')

插值语法和指令语法

插值语法就是双大括号，用于读取data中定义的数据。
指令语法就是v-开头的，比如v-bind

单向数据绑定和双向数据绑定

v-bind 单向数据绑定：当页面进行修改值时，并不会直接影响data中的数据，数据是写死的 (数据只能单向地从data流向页面)。
v-model 双向数据绑定：当页面进行修改值时，data中定义的数据也会随之更新，值得注意的是，v-model只针对表单元素使用，其他标签使用会报错。（数据不仅能从data流向页面，还可以从页面回流到data当中。）

        <div id="app">
            <input type="text" :value="message">
            <input type="text" v-model="message">
            <input type="text" v-model:value="message">

            <span v-model="message"></span> 
        </div>

        <script type="text/javascript">
            const App = {
              data() {
                return {
                  message: 'Hello Vue!!',
                }
              }
            }
            
            Vue.createApp(App).mount('#app')
        </script>

因为v-model默认收集value值，所以v-model等价于v-model:value，也就是一个语法糖。

v-model实现原理：

vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。

vue中获取dom元素是经过$ref绑定获取：

给元素添加ref属性通过this.$refs.domName获取

key的作用:

key作为列表循环的唯一标识，作用主要应用了diff算法来高效的更新虚拟DOM。

路由懒加载和图片懒加载：

核心：按需加载

图片懒加载：鼠标滚轮滚到底部某个位置再加载出图片，而不是一开始就把所以图片加载出来呈现，那样会导致页面加载缓慢，卡顿。提高页面加载速度，不在可视区域内的图片先不加载，只有滚动到可视区域的时候才加载。
路由懒加载：鼠标点击的时候才加载跳转到某个位置，不点击就不加载该组件，避免页面一开始就加载所有的。当页面很多，组件很多的时候，SPA页面在首次加载的时候，就会变的很慢。这是因为vue首次加载的时候把可能一开始看不见的组件也一次加载了，这个时候就需要对页面进行优化，就需要异步组件了。

vue路由的2种方式：hash模式和H5的history模式

hash模式的url带#号
history模式是我们正常看到url地址，history模式利用了 pushState() 和 replaceState() 方法（其中 replaceState() 方法是不能回退网页的），浏览器的历史记录栈： back()、forward()、go()

$route和$router的区别：

$router为VueRouter的实例对象，里面有很多路由器对象，指向整个大的路由对象。
$route相当于当前正在跳转的路由对象，指向我们当前映射配置中处于活跃状态的路由。

v-show和v-if的区别：

v-show指令: 控制css的display隐藏属性变为none，只会编译⼀次；
v-if指令: 是动态的向DOM树内添加或者删除DOM元素，不停的销毁和创建⽐较消耗性能。
如果某个场景下需要频繁点击则考虑使用v-show

常见的组件传值方式有哪些？

父子组件之间的通讯传值
兄弟组件传值
复杂组件之间的传值，Vuex状态管理

父子组件之间的通讯传值是如何实现的？

父传子：父组件先通过v-bind指令进行自定义属性的绑定，子组件在data函数中使用props选项进行接收父组件传过来的属性。

父组件：

<template>
    <view>
        父组件
        <test :poetry="poetry"></test>
    </view>
</template>

<script>
    import test from '../../components/test.vue'
    export default {
        data () {
            return {
                poetry:'昨夜星辰昨夜风,画楼西畔桂堂东。'
            }
        },
        methods: {
            
        },
        components:{
            test
        }
    }
</script>

子组件：

<template>
    <view>
        子组件:{{poetry}}
    </view>
</template>

<script>
    export default {
        props:['poetry'],
        data () {
            return {
                
            }
        }
    }
</script>

子传父：

子组件先绑定@click事件，然后在子组件的methods定义该函数，
在该函数里头通过$emit()触发自定义事件（第一个参数的事件名，第二个参数是携带参数），
父组件通过@绑定子组件通过$emit()传递过来的事件名，然后自己再重新定义一个新的事件名，在父组件的methods里使用传递过来的参数。

--------------------------------------------------------------------------------------------------------------------------------
以下也是一种理解方式：

子组件想要给父组件传值，需要绑定事件处理函数，
然后使用$emit()进行触发通知，告诉父组件，我要发送数据了，记得签收，
$emit()接受2个参数，第一个参数：事件处理函数的事件名称，第二个参数：传递的数据。

父组件想要接收子组件的传过来的值，需要在注册的子组件上通过@符
绑定在子组件$emit()里面事件处理函数的名称，然后再命一个新的事件处理函数。

在methods定义，再使用形参来接收。

把子组件传递过来的数据做一个保存，然后渲染在视图层上。

子组件：

<template>
    <view>
        子组件:
        <button type="default" @tap="sendInfo()">发送信息</button>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                title: '今天天气不错！'
            }
        },
        methods:{
            sendInfo:function(){
                this.$emit('send',this.title)
            }
        }
    }
</script>

父组件：

<template>
    <view>
        父组件:{{showTitle}}
        <test @send="getInfo"></test>
        <!-- <test @send="getInfo()"></test> 多了小括号是undefined -->
    </view>
</template>

<script>
    import test from '../../components/test.vue'
    export default {
        data () {
            return {
                showTitle:''
            }
        },
        methods: {
            getInfo:function(title){
                console.log(title)
                this.showTitle = title
            }
        },
        components:{
            test
        }
    }
</script>

vue-router路由使用

<router-link></router-link> 标签相当于<a></a>，用于跳转，<router-link to="/home"> 
当中的to属性是进行导航跳转，相当于a标签的href路径指定
动态绑定to属性：<router-link :to="/home"> 

如果在其他标签上使用导航跳转，只需如此打个tag标签：<router-link to="/home" tag="li"> </router-link>

<router-view></router-view>标签 将显示与 url 对应的组件，可以把它放在任何地方，纯属就是个摆位置用的，以适应你的布局。

Vue知识点总复习一

猜你喜欢

热点阅读