后端人眼中的Vue

Posted 2023-01-09 钱难有～

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了后端人眼中的Vue相关的知识，希望对你有一定的参考价值。

五、高级

5.1、计算

5.1.1、computed

在之前的购物车的案例当中，我们已经实现了购物车价格的计算，但是有些时候我们需要在其他很多地方也展示价格，所以每展示一次，我们就需要调用一次计算价格的方法，所以Vue给了一个计算属性，用于在Vue实例中完成相关业务计算的工作。

日后在某个数据渲染到页面时，如果该数据需要经过业务处理之后，或者是需要多次渲染的时候，就可以使用computed这个属性。他最大的好处是可以提升Vue的运行性能，使用computed进行相关计算处理，会将第一次计算结果进行缓存，便于日后页面多次使用。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!--
            computed:  计算属性  推荐
                作用:  用来在vue实例中完成相关业务计算工作    日后在将某个数据渲染页面时如果该数据需要经过业务处理之后再渲染就可以使用computed
                好处:  提升vue运行性能  主要使用computed进行计算相关处理 会将第一次计算结果进行缓存,便于日后页面多次使用
                使用:  属性名
        -->
    <div id='app'>
        <h1>msg counts counts countscountscountscountscounts</h1>
    </div>
</body>

</html>
<script>
    new Vue(
        el: '#app',
        data: 
            msg: "购物车案例之computed",
            count:0,
        ,
        methods: 
        ,
        computed:  //计算属性
            counts() 
                console.log("computed.counts----------------------");
                return this.count + 10;
            ,

        
    ); 
</script>

可以看到，他只调用了一次，提高了性能。

5.2、事件修饰符

修饰符是用来喝事件连用，可以用来决定事件触发条件或者是阻止事件触发的机制，Vue官方给了四种常见的事件修饰符：

.stop：用来阻止事件冒泡。
.prevent：用来阻止事件或者标签的默认行为。
.self：只监听自身标签触发的事件。
.once：该事件只触发一次。

5.2.1、.stop

事件冒泡：孩子的事件会扩散到父亲的事件中，导致父亲的事件也触发了。他的语法是@事件名事件修饰符="事件处理函数"，类似@click.stop="test"。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id='app'>
        <h3>stop修饰符</h3>
        <div style="width: 200px;height: 200px;background: red" @click="parent">

            <div style="width: 100px;height: 100px;background: aquamarine" @click.stop="child">

                <div style="width: 50px;height: 50px;background:royalblue" @click="child1">

                </div>

            </div>

        </div>
    </div>
</body>

</html>
<script>
    new Vue(
        el:"#app",
        data:
            msg:"事件修饰符"
        ,
        methods:
            test()
                console.log("test");
            ,
            parent()
                console.log("parent");
            ,
            child()
                console.log("child");
            ,
            child1()
                console.log("child1");
            ,
            testa()
                console.log("testa");
            
        ,
        computed:,//用来在vue实例中定义一些列计算属性    属性名
    ); 
</script>

5.2.2、.prevent

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id='app'>
        <h3>prevent修饰符</h3>
        <a href="http://www.baidu.com" @click.prevent="testa">点我</a>
        <a href="javascript:;" @click.prevent="testa">点我</a>
    </div>
</body>

</html>
<script>
    new Vue(
        el: '#app',
        data: 
        ,
        methods: 
        ,
    ); 
</script>

5.2.3、self

事件修饰符还可以连用，大概长这样@click.self.stop。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id='app'>
        <h3>self修饰符(事件修饰符可以连用)</h3>
        <div style="width: 200px;height: 200px;background: red" @click.self="parent">

            <div style="width: 100px;height: 100px;background: aquamarine" @click.self.stop="child">

                <div style="width: 50px;height: 50px;background:royalblue" @click="child1">

                </div>

            </div>

        </div>
    </div>
</body>

</html>
<script>
    new Vue(
        el: '#app',
        data: 
        ,
        methods: 
        ,
    ); 
</script>

5.3、按键修饰符

事件修饰符是可以对所有事件进行修饰，而按键修饰符只可以对键盘事件来进行修饰，按键修饰符同样可以连着修饰，Vue提供了一堆的按键修饰符：

.enter：对回车键修饰。
.tab：对键盘切换tab键修饰。
.delete：对删除或者是退格键进行修饰。
.esc：对键盘esc事件进行修饰。
.space：对键盘空格键进行修饰。
.up：对键盘方向键中的上键进行修饰。
.down：对键盘方向键中的下键进行修饰。
.left：对键盘方向键中的左键进行修饰。
.right：对键盘方向键中的右键进行修饰。

5.4、数组常用操作

在操作数组的时候，有这几种常见的操作：

push：会返回数组长度
pop：会返回删除的值
unshift：会返回数组长度
shift ：会返回删除的值
splice：会返回新数组
concat：会返回新数组

var arr = [1, 2, 3]
// 往数组最后一位添加一个数字
arr.push(4) // [1, 2, 3, 4]
// 删除数组最后一个数字
arr.pop()   // [1, 2, 3]
console.log(arr)
// 往数组第一位添加一个数字
arr.unshift(0)
console.log(arr)
// 删除数组第一个元素
arr.shift()
console.log(arr)
// splice
// 删除第一个元素
arr.splice(1, 2) 
console.log(arr)
arr.splice(1, 2, 2, 4, 5) 
console.log(arr)
// 合并数组
console.log([1, 6].concat([5, 7]))

数组去重：

	var arr2 = [1, 2, 3, 1, 6, 2, 3]

    //ES6
    consoloe.log([...new Set(arr2)])
    console.log(Array.from(new Set(arr2)))

    var newArray = [];
    for(var i=0; i<arr2.length; i++)
        if(newArray.indexOf(arr2[i])==-1)
            newArray.push(arr2[i])
        
    
    console.log(newArray)

    var newArray2 = [];
    var obj = ;
    for(var i=0; i<arr2.length; i++)
        if(!obj[arr2[i]]) //如果不在obj中，就表示不重复的数据，就在对象中添加键值对

            obj[arr2[i]] = arr2[i]
            newArray2.push(arr2[i])
        
    
    console.log(newArray2)

5.5、本地存储

有些时候需要缓存一些数据

5.5.1、localStorage永久存储

// 添加数据；setItem的value值是字符串类型的数据
localStorage.setItem('name','张三')；
// 获取数据
localStorage.getItem('name'); // 张三
// 清空
localStorage.clear();

注意：

除非是主动删除，不然是不会自动删除的。
一般浏览器存储的大小是5M（5M = 1024 * 5kb）。

5.5.2、sessionStorage临时会话存储

// 添加数据；setItem的value值是字符串类型的数据
sessionStorage.setItem('name','张三')；
// 获取数据
sessionStorage.getItem('name'); // 张三
// 清空
sessionStorage.clear();

注意：

关闭浏览器会自动清空数据。
一般浏览器存储的大小是5M。

5.6、深入双向数据绑定原理

5.6.1、原理

双向数据绑定是Vue最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。Vue里面是怎么做到的的呢？其实就是使用了Object.defineProperty 把Vue内的属性全部转成 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

**vue双向数据绑定原理：借助Object.defineProperty()对数据进行劫持，并结合发布-订阅者模式，来实现双向数据绑定。**他的语法：

Object.defineProperty(obj, prop, desc)
1. `obj` 需要定义属性的当前对象
2. `prop` 当前需要定义的属性名
3. `desc` 属性描述符

通过Object.defineProperty()为对象定义属性，有两种形式，分别为数据描述符，存取描述符，下面分别描述两者的区别：

value 表示它的默认值
writable 如果为true标识可以被修改，如果为false标识不能被修改（默认值为false）
configurable 描述属性是否配置，以及可否删除，可以认为是总开关默认值 false（不可删除）
enumerable 描述属性是否出现在for in 或者 Object.keys()的遍历中默认值false(不能遍历)

let obj = ;
Object.defineProperty(obj, 'name', 
    value: '张三'
)
obj.name = '李四'
console.log(obj.name) // 张三

let obj = ;
Object.defineProperty(obj, 'name', 
    value: '张三',
    writable: true
)
obj.name = '李四'
console.log(obj.name)

let obj = ;
  Object.defineProperty(obj, 'name', 
    value: '张三',
    writable: true,
    configurable: true,
    enumerable: true
  )
  obj.name = '李四'
  // delete obj.name
  console.log(obj.name) // 李四
  console.log(Object.keys(obj)) // ['name']

5.6.2、面试题

vue的双向数据绑定原理是什么？

vue数据双向绑定是通过数据劫持结合“发布者-订阅者模式”的方式来实现的。
vue是通过Object.defineProperty()来实现数据劫持，其中会有getter()和setter方法；当读取属性值时，就会触发getter()方法，在view中如果数据发生了变化，就会通过Object.defineProperty()对属性设置一个setter函数，当数据改变了就会来触发这个函数；

5.7、父子组件

5.7.1、父级向子级传递

在组件中，使用选项props来声明需要从父级接收到的数据。pros机制接受数据相当于自己组件data中声明了一个数据。只能父亲影响孩子，不可以孩子影响父亲。

props的值有两种方式：

字符串数组，数组中的字符串就是传递时的名称。
对象，对象可以设置传递时的类型（String，Number，Boolean，Array， Object，Date，Function，Symbol），也可以设置默认值等。

<body>
  <div id="app1">
    <my-con1></my-con1>
  </div>
</body>

<template id="template2">
  <section>
    <h3>titleB</h3>
    <p>组件内容B</p>
    <!-- my-con1组件内的aa组件 --> 
    <aa v-bind:parent-txt="childtxt"></aa>
  </section>
</template>
<script>
  var componentB = 
    template: '#template2',
    data() 
      return 
        title: 'zj',
        childtxt: 'child text'
      
    ,
    components: 
      'aa': 
        template: '<div>parentTxt</div>',
        props: ['parentTxt']
      
    
  
  
  const vm1 = new Vue(
    el: '#app1',
    components: 
      'my-con1': componentB
    
  )
</script>

5.7.2、子级向父级传递

<body>
  <div id="app1">
    <my-con1></my-con1>
  </div>
</body>

<template id="template2">
  <section>
    <h3>titleB</h3>
    <p>组件内容B</p>
    <aa v-bind:parent-txt="childtxt" v-on:changetitle="changeTitle"></aa>
  </section>
</template>
<script>
  var componentB = 
    template: '#template2',
    data() 
      return 
        title: 'zj',
        childtxt: 'child text'
      
    ,
    components: 
      'aa': 
        template: '<div v-on:click="change">parentTxt</div>',
        props: ['parentTxt'],
        methods: 
          change() 
            this.$emit('changetitle', 
              a: 1
            )
          
        
      
    ,
    methods: 
      changeTitle(obj) 
        console.log(obj)
        this.title = obj.a
      
    
  

  const vm1 = new Vue(
    el: '#app1',
    components: 
      'my-con1': componentB
    
  )
以上是关于后端人眼中的Vue的主要内容，如果未能解决你的问题，请参考以下文章 
 后端人眼中的Vue
 后端人眼中的Vue
 后端人眼中的Vue
 后端人眼中的Vue
 后端人眼中的Vue
 后端人眼中的Vue