Vue 프로젝트에 사용된 실용적인 팁을 공유하세요

Vue를 개발하는 과정에서 우리는 종종 이런저런 문제에 직면하게 되고, 문제가 해결되었을 때에도 여전히 해결되지 않았다는 것을 알게 됩니다. 몇 가지 세부 사항을 마스터했습니다. 오늘은 에디터가 프로젝트에 활용될 몇 가지 실용적인 팁을 모아봤습니다. 돈을 벌기 위해 열심히 일하는 여러분에게 도움이 되길 바랍니다. 세상의 법칙은 처음처럼, 나중에 읽고, 끝없이 낭만적인 만남을 갖는 것입니다.

데이터가 응답하지 않습니다. 사용에 문제가 있는 것 같습니다

친구가 며칠 전에 코드를 보냈더니 Vue에 버그가 있다고 분명히 썼습니다. 그렇군요. 그런데 왜 데이터가 응답하지 않나요? Vue의 버그인 것 같군요. 나는 그가 You Yuxi보다 더 강력하고 더 높은 수준에 도달할 수 없다고 느꼈기 때문에 그를 무시했습니다. 하지만 개발 중에 데이터가 응답하지 않는 경우가 가끔 발생하는 것은 사실입니다. 그렇다면 어떻게 해야 할까요? 예를 들어 다음 코드는

<template>
  <div>
    <div>
      <span>用户名: {{ userInfo.name }}</span>
      <span>用户性别: {{ userInfo.sex }}</span>
      <span v-if="userInfo.officialAccount">
        公众号: {{ userInfo.officialAccount }}
      </span>
    </div>
    <button @click="handleAddOfficialAccount">添加公众号</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {
        name: &#39;子君&#39;,
        sex: &#39;男&#39;
      }
    }
  },
  methods: {
    // 在这里添加用户的公众号
    handleAddOfficialAccount() {
      this.userInfo.officialAccount = &#39;前端有的玩&#39;
    }
  }
}
</script>

위 코드에서 사용자 정보에 공식 계정 속성을 추가하려고 하는데 this.userInfo.officialAccount = 'Some fun on the front end'를 추가하면 그렇게 됩니다. 적용되지 않습니다. 이유는 무엇입니까?

이것은 Vue 내부에서 객체의 getter, setter 메소드의 각 키를 듣기 위해 Object.definePrototype을 사용하여 데이터 응답을 구현하지만 이 메소드를 통해서는 속성과 새로 추가된 속성은 모니터링할 수 없지만 모니터링만 하고 싶습니다. 편집자님, 어떻게 해야 하는지 알려주세요. 아래 편집기에서는 4가지 방법을 제공합니다. 더 많은 방법이 있으면 아래 댓글란에 알려주시기 바랍니다.

1. data

에 미리 추가할 속성을 정의합니다. 예를 들어 위의 공식 계정의 경우 userInfo에 미리 정의하면 다음과 같이 새로운 속성이 되지 않습니다. 다음은

data() {
    return {
      userInfo: {
        name: '子君',
        sex: '男',
        // 我先提前定义好
        officialAccount: ''
      }
    }
  }

2 입니다. userInfo

userInfo에 새로운 속성을 추가할 수는 없지만 userInfo가 이미 정의되어 있어서 userInfo 값을 직접 수정해도 괜찮을까요?

this.userInfo = {
  // 将原来的userInfo 通过扩展运算法复制到新的对象里面
  ...this.userInfo,
  // 添加新属性
  officialAccount: '前端有的玩'
}

3. Vue.set

을 사용하세요. 사실 위의 두 가지 방법은 새로운 속성의 경우 Vue가 조금 까다롭습니다. 공식에서는 새로운 속성이 데이터 응답을 트리거할 수 없는 문제를 해결하기 위해 새로운 메소드 Vue.set를 제공합니다.

Vue.set 메소드 정의

/**
* target 要修改的对象
* prpertyName 要添加的属性名称
* value 要添加的属性值
*/
Vue.set( target, propertyName, value )

위 코드는 Vue.set을 사용하여

import Vue from 'vue'

// 在这里添加用户的公众号
handleAddOfficialAccount() {
  Vue.set(this.userInfo,'officialAccount', '前端有的玩')
}

로 수정할 수 있지만, set 메소드를 사용할 때마다 변경해야 합니다. Vue 소개하기 번거로워서 Vue에서는 단순화를 위해 Vue의 프로토타입 체인에 set 메소드, 즉 Vue.prototype.$set = Vue를 마운트했습니다. set 이므로 Vue.prototype.$set = Vue.set,所以在Vue组件内部可以直接使用this.$set代替Vue.set

this.$set(this.userInfo,'officialAccount', '前端有的玩')

小编发现有许多同学不知道什么时候应该用Vue.set，其实只有当你要赋值的属性还没有定义的时候需要使用Vue,set，其他时候一般不会需要使用。

4. 使用$forceUpdate

我觉得$forceUpdateVue.set

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item">
        {{ item }}
      </li>
    </ul>
    <button @click="handleChangeName">修改名称</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [&#39;张三&#39;, &#39;李四&#39;]
    }
  },
  methods: {
    // 修改用户名称
    handleChangeName() {
      this.list[0] = &#39;王五&#39;
    }
  }
}
</script>

대신 Vue 구성 요소 내에서 직접 this.$set를 사용할 수 있습니다. 편집자는 많은 학생들이 언제 Vue.set을 사용해야 하는지 모른다는 사실을 발견했습니다.

. 사실 값을 할당하고 싶을 때만

Vue, set

은 속성이 정의되지 않은 경우 사용해야 하며, 그 외의 경우에는 일반적으로 사용할 필요가 없습니다.

4.

$forceUpdate

사용 $forceUpdate의 존재로 인해 많은 프런트엔드 개발자가 이 두 가지에 주의를 기울이지 못하는 것 같습니다. -way 데이터 바인딩의 원칙은
• data

  를 수정할 때마다 $forceUpdate를 호출하면 Vue 구성 요소가 다시 렌더링되고 bug가 존재하지 않는다는 것입니다. 하지만 실제로 이 방법은 불필요한 성능 소모가 많이 발생하므로 권장하지 않습니다.

배열의 구체적인 방법

• 사실, 배열도 데이터 수정 후 응답하지 않는 상황이 있습니다. 예를 들어 다음 코드는

  Vue.set(this.list,0,'王五')

  위 코드에서는 Zhang San의 이름을 Wang으로 변경하려고 합니다. Wu. 사실 이 수정 사항은 Vue가 다음과 같은 변경된 배열을 감지할 수 없기 때문에 적용되지 않습니다. 인덱스를 사용하여 항목을 직접 설정하는 경우: this.list[index] = newValue
  🎜🎜🎜🎜배열의 🎜🎜🎜🎜length🎜🎜🎜🎜 속성을 수정합니다. 예: 🎜 🎜🎜this.list.length = 0🎜🎜🎜

所以在上例中通过this.list[0] = '王五' 是无法触发数据响应的，那应该怎么办呢？像上面提到的Vue.set和$forceUpdate都可以解决这个问题，比如Vue.set可以这样写

Vue.set(this.list,0,'王五')

除了那些方法之外，Vue还针对数组提供了变异方法

在操作数组的时候，我们一般会用到数据提供的许多方法，比如push,pop,splice等等，在Vue中调用数组上面提供的这些方法修改数组的值是可以触发数据响应的，比如上面的代码改为以下代码即可触发数据响应

this.list.splice(0,1,'王五')

实际上，如果Vue仅仅依赖getter与setter，是无法做到在数组调用push,pop等方法时候触发数据响应的，因此Vue实际上是通过劫持这些方法，对这些方法进行包装变异来实现的。

Vue对数组的以下方法进行的包装变异:

• push
• pop
• shift
• unshift
• splice
• sort
• reverse

所以在操作数组的时候，调用上面这些方法是可以保证数据可以正常响应，下面是Vue源码中包装数组方法的代码:

var original = arrayProto[method];
  def(arrayMethods, method, function mutator () {
    // 将 arguments 转换为数组
    var args = [], len = arguments.length;
    while ( len-- ) args[ len ] = arguments[ len ];
    var result = original.apply(this, args);
    // 这儿的用法同dependArray(value)，就是为了取得dep
    var ob = this.__ob__;
    var inserted;
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args;
        break
      case 'splice':
        inserted = args.slice(2);
        break
    }
    // 如果有新的数据插入，则插入的数据也要进行一个响应式
    if (inserted) { ob.observeArray(inserted); }
   // 通知依赖进行更新
    ob.dep.notify();
    return result
  });

文本格式化，filter更简单

使用filter 简化逻辑

我想把时间戳显示成yyyy-MM-DD HH:mm:ss的格式怎么办？是需要在代码中先将日期格式化之后，再渲染到模板吗？就像下面这样

<template>
  <div>
    {{ dateStr }}
    <ul>
      <li v-for="(item, index) in getList" :key="index">
        {{ item.date }}
      </li>
    </ul>
  </div>
</template>
<script>
import { format } from &#39;@/utils/date&#39;
export default {
  data() {
    return {
      date: Date.now(),
      list: [
        {
          date: Date.now()
        }
      ]
    }
  },
  computed: {
    dateStr() {
      return format(this.date, &#39;yyyy-MM-DD HH:mm:ss&#39;)
    },
    getList() {
      return this.list.map(item => {
        return {
          ...item,
          date: format(item.date, &#39;yyyy-MM-DD HH:mm:ss&#39;)
        }
      })
    }
  }
}
</script>

像上面的写法，针对每一个日期字段都需要调用format，然后通过计算属性进行转换？这时候可以考虑使用Vue提供的filter去简化

<template>
  <div>
    <!--使用过滤器-->
    {{ dateStr | formatDate }}
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <!--在v-for中使用过滤器-->
        {{ item.date | formatDate }}
      </li>
    </ul>
  </div>
</template>
<script>
import { format } from &#39;@/utils/date&#39;
export default {
  filters: {
    formatDate(value) {
      return format(value, &#39;yyyy-MM-DD HH:mm:ss&#39;)
    }
  },
  data() {
    return {
      date: Date.now(),
      list: [
        {
          date: Date.now()
        }
      ]
    }
  }
}
</script>

通过上面的修改是不是就简单多了

注册全局filter

有些过滤器使用的很频繁，比如上面提到的日期过滤器，在很多地方都要使用，这时候如果在每一个要用到的组件里面都去定义一遍，就显得有些多余了，这时候就可以考虑Vue.filter注册全局过滤器

对于全局过滤器，一般建议在项目里面添加filters目录，然后在filters目录里面添加

// filters\index.js

import Vue from 'vue'
import { format } from '@/utils/date'

Vue.filter('formatDate', value => {
  return format(value, 'yyyy-MM-DD HH:mm:ss')
})

然后将filters里面的文件引入到main.js里面，这时候就可以在组件里面直接用了，比如将前面的代码可以修改为

<template>
  <div>
    <!--使用过滤器-->
    {{ dateStr | formatDate }}
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <!--在v-for中使用过滤器-->
        {{ item.date | formatDate }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      date: Date.now(),
      list: [
        {
          date: Date.now()
        }
      ]
    }
  }
}
</script>

是不是更简单了

开发了插件库，来安装一下

在使用一些UI框架的时候，经常需要使用Vue.use来安装， 比如使用element-ui时候，经常会这样写:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI,{size: 'small'});

使用了Vue.use之后，element-ui就可以直接在组件里面使用了，好神奇哦（呸，娘炮）。接下来我们实现一个简化版的element来看如何去安装。

了解Vue.use的用法

Vue.use是一个全局的方法，它需要在你调用 new Vue() 启动应用之前完成，Vue.use的参数如下

/**
* plugin: 要安装的插件 如 ElementUI
* options: 插件的配置信息 如 {size: 'small'}
*/
Vue.use(plugin, options)

模拟element-ui的安装逻辑

想一下，使用Vue.use(ElementUI,{size: 'small'}) 之后我们可以用到哪些element-ui提供的东西

• 可以直接在组件里面用element-ui的组件，不需要再import

• 可以直接使用v-loading指令

• 通过this.$loading在组件里面显示loading

• 其他...

// 这个是一个按钮组件
import Button from '@/components/button'

// loading 指令
import loadingDirective from '@/components/loading/directive'

// loading 方法
import loadingMethod from '@/components/loading'

export default {
  /**
   * Vue.use 需要插件提供一个install方法
   * @param {*} Vue Vue
   * @param {*} options 插件配置信息
   */
  install(Vue, options) {
    console.log(options)
    // 将组件通过Vue.components 进行注册
    Vue.components(Button.name, Button)

    // 注册全局指令
    Vue.directive('loading', loadingDirective)

    // 将loadingMethod 挂载到 Vue原型链上面，方便调用
    Vue.prototype.$loading = loadingMethod
  }
}

通过上面的代码，已经实现了一个丐版的element-ui插件，这时候就可以在main.js里面通过Vue.use进行插件安装了。大家可能会有疑问，为什么我要用这种写法，不用这种写法我照样可以实现功能啊。小编认为这种写法有两个优势

• 标准化，通过提供一种统一的开发模式，无论对插件开发者还是使用者来说，都有一个规范去遵循。

• 插件缓存，Vue.use 在安装插件的时候，会对插件进行缓存，即一个插件如果安装多次，实际上只会在第一次安装时生效。

插件的应用场景

• 添加全局方法或者 property。

• 添加全局资源：指令/过滤器/过渡等。

• 通过全局混入来添加一些组件选项。

• 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

• 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如element-ui

提高Vue渲染性能，了解一下Object.freeze

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。但是这个过程实际上是比较消耗性能的，所以对于一些有大量数据但只是展示的界面来说，并不需要将property加入到响应式系统中，这样可以提高渲染性能，怎么做呢，你需要了解一下Object.freeze。

在Vue官网中，有这样一段话：这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再_追踪_变化。这段话的意思是，如果我们的数据使用了Object.freeze，就可以让数据脱离响应式系统，那么该如何做呢?

比如下面这个表格，因为只是渲染数据，这时候我们就可以通过Object.freeze来优化性能

<template>
  <el-table :data="tableData" >
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>
<script>
export default {
  data() {
    const data = Array(1000)
      .fill(1)
      .map((item, index) => {
        return {
          date: &#39;2020-07-11&#39;,
          name: `子君${index}`,
          address: &#39;大西安&#39;
        }
      })
    return {
      // 在这里我们用了Object.freeze
      tableData: Object.freeze(data)
    }
  }
}
</script>

有的同学可能会有疑问，如果我这个表格的数据是滚动加载的，你这样写我不就没法再给tableData添加数据了吗？是，确实没办法去添加数据了，但还是有办法解决的，比如像下面这样

export default {
  data() {
    return {
      tableData: []
    }
  },
  created() {
    setInterval(() => {
      const data = Array(1000)
        .fill(1)
        .map((item, index) => {
          // 虽然不能冻结整个数组，但是可以冻结每一项数据
          return Object.freeze({
            date: '2020-07-11',
            name: `子君${index}`,
            address: '大西安'
          })
        })
      this.tableData = this.tableData.concat(data)
    }, 2000)
  }
}

合理的使用Object.freeze，是可以节省不少渲染性能，特别对于IE浏览器，效果还是很明显的，赶快去试试吧。

最后如果你现在需要开发移动端项目，可以了解一下小编整理的一个开箱即用框架 vue-vant-base,也许可以帮到你哦

结语

不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特?梵高

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

위 내용은 Vue 프로젝트에 사용된 실용적인 팁을 공유하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!