종합 요약: vue 사용 중 발생하는 문제 해결 요약(꼭 읽어야 함)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

종합 요약: vue 사용 중 발생하는 문제 해결 요약(꼭 읽어야 함)

不言

Aug 17, 2018 pm 02:29 PM

html5javascriptnode.jsvue.js

이 기사는 vue 사용 중에 발생하는 문제에 대한 솔루션 요약을 제공합니다(반드시 읽어야 함). 이 기사는 특정 참조 가치가 있는 js에 대한 이해를 소개합니다. 그것은 당신에게 도움이 되기를 바랍니다.

이 글은 순전히 일상생활에서 겪은 개인적인 경험을 요약한 것입니다. 훌륭한 기술이 아닌 작은 트릭입니다. 도움이 되셨다면 영광입니다.

이 글에서는 Rare API 등의 사용법을 다루지 않습니다. 대부분의 콘텐츠는 vue의 일부 사례를 기반으로 합니다. 기회주의 의혹으로 인해 일부 비표준 부작용이 발생할 수 있으므로 프로젝트 요구 사항에 따라 적절하게 사용하십시오. 罕见API使用方法等，大部分内容都是基于对vue的一些实践而已。由于涉嫌投机取巧，可能会带来一些不符合规范的副作用，请根据项目要求酌情使用。

多个页面都使用的到方法，放在 vue.prototype 上会很方便

刚接触 vue 的时候做过一件傻事，因为封装了一个异步请求接口post,放在 post.js 文件里面，然后在每个需要使用异步请求的页面引入
```
import port from './xxxx/xxxx/post'
```
如果只是这样，还没什么，我们可以写好一个页面以后再复制，可以保证每个页面都有上面的语句。但是如果每个文件所在的目录层级不一样呢？
```
// 假设正常是这样
import port from '../xxxx/xxxx/post'
// 目录加深一级，就变成这样
import port from '../../xxxx/xxxx/post'
// 再加深一级的样子
import port from '../../../xxxx/xxxx/post'
```
当然，这个时候，我们可以用别名 @/xxxx/post,但是还是少不了要每个页面引用。
那我们来看看，用vue.prototype 有多方便？
首先，你得在 vue 的入口文件( vue-cli 生成的项目的话，默认是 /src/main.js)里面做如下设置
```
 import port from './xxxx/xxxx/post'

 vue.prototype.$post = post
```
这样，我们就可以在所有的 vue 组件（页面）里面使用 this.post() 方法了，就像 vue 的亲儿子一样

tip: 把方法挂在到 prototype 上的时候，最好加一个 $ 前缀，避免跟其他变量冲突
til again: 不要挂载太多方法到 prototype 上，只挂载一些使用频率非常高的
需要响应的数据，在获取到接口数据的时候，先设置

大家有没有很经常碰到这样都一种情况，在循环列表的时候，我们需要给列表项一个控制显示的属性，如是否可删除，是否已选中等等，而后端接口一般不会返回这种字段，因为这属于纯前端展示的，跟后端没啥关系，比如后端给的数据如下
```
[
  {name: 'abc', age: 18},
  {name: 'def', age: 20},
  {name: 'ghi', age: 22},
]
```
我们不妨假设以上数据为学生列表

然后我们需要渲染这个列表，在每一项后面显示一个勾选按钮，如果用户打勾，则这个按钮是绿色，默认这个按钮是灰色，这个时候，上表是没有满足这个渲染条件的数据，而如果我们在用户打勾的时候，再去添加这个数据的话，正常的做法是无法及时响应的。

如果我们在获取到数据的时候，先给数组的每一项都加一个是否打勾的标示，就可以解决这个问题，我们假设我们获取到的数据是 res.list
```
res.list.map(item => { 
  item.isTicked ＝ false
})
```
这么做的原理是 vue 无法对不存在的属性作响应，所以我们在获取到数据的时候，先把需要的属性加上去，然后在赋值给 data , 这样 data 接收到数据的时候，已经是存在这个属性了，所以会响应。当然还有其他方法可以实现。不过对于一个强迫症来说，我还是比较倾向于这种做法
封装全局基于 promise 的异步请求方法

看过很多项目的源码，发现大部分的异步请求都是直接使用 axios 之类的方法，如下
```
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
 .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
```
如果有跨域，或者需要设置 http 头等，还需要加入更多的配置，而这些配置，对于同一个项目来说，基本都是一样的，不一样的只有 url 跟参数，既然这样，那我吗为什么不把它封装成一个方法呢？
```
function post (url,param) {
    return axios({
      method: 'post',
      url: url,
      data: param
      ... axios 的其他配置
    })
}
```
tip: 这里原来我多用了一层promise包起来,对简单的需求来说是太多余了,感觉掘金用户 @日月为易。 指出

再结合第一点，我们就可以再任意 vue 实例中这样使用
```
let param = {
  firstName: 'Fred',
  lastName: 'Flintstone'
}
this.post('/user/12345',param)
.then(...)
.catch(...)
```
有没有比原始的简单很多呢？如果你的项目支持 async await，还可以这样用
```
let param = {
  firstName: 'Fred',
  lastName: 'Flintstone'
}
let res  = await this.post('/user/12345',param)
console.log(res) // res 就是异步返回的数据
```
tip: await 关键字必须在 被 async 修饰的函数里面使用
如果你觉得有时候，你真的需要父子组件共享一个值，不如试试传个引用类型过去

vue 的父子组件传值，有好多种方法，这里就不一一列举了，但是今天我们要了解的，是利用 javascript
1. 이 방법은 여러 페이지에 걸쳐 사용할 수 있어 vue.prototype Strong>🎜 🎜vue를 처음 접했을 때 어리석은 짓을 했습니다. 왜냐하면 vue가 비동기 요청 인터페이스 post를 캡슐화하여 post에 배치했기 때문입니다. js 파일을 만든 다음 비동기 요청을 사용해야 하는 모든 페이지에 🎜
  <subcomponent></subcomponent>
  🎜를 추가하면 아무 것도 아닙니다. 페이지를 작성하고 나중에 복사하여 각 페이지에 위의 명령문이 있는지 확인할 수 있습니다. 그런데 각 파일의 디렉터리 수준이 다르다면 어떻게 될까요? 🎜
  data () { return { subData: { filed1: 'field1', filed2: 'field2', filed3: 'field3', filed4: 'field4', filed5: 'field5', } } }
  🎜물론 이때 별칭 @/xxxx/post를 사용할 수 있지만 여전히 각 페이지에서 이를 인용해야 합니다.
  vue.prototype을 사용하면 얼마나 편리한지 살펴볼까요?
  먼저 vue 항목 파일(vue-cli, 기본값은 /src/main.js) 내부에서 다음 설정을 합니다🎜<pre class="brush:php;toolbar:false"> <input> <input> <input> .... <input></pre>🎜이 방법으로 모든 <code>vue 구성 요소(페이지)에서 this.post() 메서드를 사용할 수 있습니다. vue의 아들🎜
  tip: prototype에 메서드를 걸 때 혼동을 피하기 위해 $ 접두사를 추가하는 것이 가장 좋습니다. 다른 변수 충돌과 함께🎜 다시 말하지만: 프로토타입에 너무 많은 메소드를 마운트하지 말고, 자주 사용되는 일부 메소드만 마운트하세요🎜
2. 🎜 응답 인터페이스 데이터를 가져올 때 먼저 설정하십시오.🎜🎜이런 상황을 자주 접한 적이 있습니까? 목록을 반복할 때 목록 항목에 표시를 제어하는 속성을 부여해야 합니다. 선택 여부 등을 삭제할 수 있습니다. 백엔드 인터페이스는 일반적으로 이러한 종류의 필드를 반환하지 않습니다. 왜냐하면 이는 순전히 프런트엔드 디스플레이이고 백엔드와 관련이 없기 때문입니다. 백엔드에서 제공하는 내용은 다음과 같습니다🎜
```
data () {
 return {
   field1: 'value1',
   field2: 'value2',
   field3: 'value3',
   ...
   fieldn:'valuen'
 }
}
```
  🎜위를 가정해도 됩니다. 데이터는 학생 목록입니다🎜🎜 그런 다음 이 목록을 렌더링하고 각 항목 뒤에 확인 버튼을 표시해야 합니다. 버튼은 녹색입니다. 이때 버튼은 회색입니다. 렌더링 조건 데이터는 사용자가 틱할 때 이 데이터를 추가하면 일반적인 접근 방식에서는 응답할 수 없습니다. 시간. 🎜🎜데이터를 가져올 때 배열의 각 항목에 먼저 확인 표시를 추가하면 이 문제를 해결할 수 있습니다. 우리가 얻는 데이터는 res.list🎜
```
 var param = {
   backend_field1: this.field1,
   backend_field2: this.field2,
   backend_field3: this.field3,
   ...
   backend_fieldn: this.fieldn
 }
 this.post(url,param)
```
  🎜라고 가정합니다. 이렇게 하면 vue가 존재하지 않는 속성에 응답할 수 없으므로 데이터를 얻을 때 먼저 필요한 속성을 추가한 다음 이러한 방식으로 데이터에 할당합니다. , data가 데이터를 수신하면 이 속성이 이미 존재하므로 응답합니다. 물론 다른 방법도 있습니다. 하지만 강박 장애가 있는 사람에게는 여전히 이 접근 방식이 더 좋습니다🎜
3. 🎜약속을 기반으로 전역 비동기 요청 방법을 캡슐화합니다.🎜🎜다음 내용을 참조하세요 많은 프로젝트의 소스 코드를 읽어보니 대부분의 비동기 요청이 다음과 같이 axios와 같은 메소드를 직접 사용한다는 것을 알았습니다🎜
```
    <input>
    <input>
    <input>
    ....
    <input>
```
  🎜크로스 도메인이 있거나 http를 설정해야 하는 경우 헤더를 사용하려면 더 많은 구성을 추가해야 하며 이러한 구성은 동일한 프로젝트에 대해 기본적으로 동일합니다. 유일한 차이점은 url과 매개변수입니다. 그것을 메소드로 캡슐화하는 것은 어떻습니까? 🎜
```
 
  "javascript
  data () {
   return {
     queryParam:{
       backend_field1: 'value1'
       backend_field2: 'value2'
       backend_field3: 'value3'
       ...
       backend_fieldn: 'valuen'
     }
   }
  }
  "
  然后提交数据的时候这样：
  "javascript
   this.post(url,this.queryParam)
  "
```
  팁: 마무리하기 위해 추가 약속 레이어를 사용한 것으로 나타났습니다. 이는 단순한 요구 사항에 비해 너무 중복된 것 같습니다. Nuggets 사용자 @日月为易처럼 느껴집니다. 지적
  🎜첫 번째 요점과 결합하면 모든 vue 인스턴스에서 이렇게 사용할 수 있습니다🎜
```
data () {
 return {
   field1: 'value1',  // 控制xxx显示
   field2: 'value2',  // 页面加载状态
   field3: [],        // 用户列表
   ...
   fieldn: 'valuen'   // XXXXXXXX
 }
}
```
  🎜원본보다 훨씬 간단합니까? 프로젝트가 async await를 지원하는 경우 다음과 같이 사용할 수도 있습니다.🎜
```
<p>
   </p><p>姓名：{{user1.name}}</p>
   <p>性别：{{user1.sex}}</p>
   <p>年龄：{{user1.age}}</p>
   ...此处省略999个字段...
   <p>他隔壁邻居的阿姨家小狗的名字：{{user1.petName}}</p>


<p>
    </p><p>姓名：{{user2.name}}</p>
    <p>性别：{{user2.sex}}</p>
    <p>年龄：{{user2.age}}</p>
    ...此处省略999个字段...
    <p>他隔壁邻居的阿姨家小狗的名字：{{user2.petName}}</p>
```
  팁: await 키워드는 수정된 함수에서 사용하세요
4. 🎜때때로 값을 공유하기 위해 상위 및 하위 구성요소가 정말로 필요하다고 생각되면 참조를 전달해 보는 것은 어떨까요? type?🎜🎜vue의 부모-자식 구성 요소에는 값을 전달하는 다양한 방법이 있으므로 여기에 모두 나열하지는 않지만 오늘 알고 싶은 것은 javascript 유형 특성을 참조하면 값 전달이라는 또 다른 목적도 달성됩니다🎜
  假设有这么一个需求，父组件需要传 3 个值到子组件，然后再子组件里面改动后，需要立马再父组件上作出响应，我们通常的做法上改完以后，通过 this.$emit 发射事件，然后再父组件监听对应的事件，然而这么做应对一两个数据还好，如果传的数据多了，会累死人。
  我们不妨把这些要传递的数据，包再一个对象／数组里面，然后在传给子组件
```
<subcomponent></subcomponent>
```
```
data () {
  return {
    subData: {
      filed1: 'field1',
      filed2: 'field2',
      filed3: 'field3',
      filed4: 'field4',
      filed5: 'field5',
    }
  }
}
```
  这样，我们在子组件里面改动 subData 的内容，父组件上就能直接作出响应，无需 this.$emit 或 vuex 而且如果有其他兄弟组件的话，只要兄弟组件也有绑定这个 subData ，那么兄弟组件里面的 subData 也能及时响应
  
  tip: 首先，这么做我个人上感觉有点不符合规范的，如果没有特别多的数据，还是乖乖用 this.$emit 吧，其次，这个数据需要有特定的条件才能构造的出来，并不是所有情况都适用。
5. 异步请求的参数在 data 里面构造好，用一个对象包起来，会方便很多
  
  有做过类似 ERP 类型的系统的同学，一定碰到过这样的一个场景，一个列表，有 N 个过滤条件，这个时候通常我们这么绑定
```
 <input>
 <input>
 <input>
 ....
 <input>
```
```
data () {
 return {
   field1: 'value1',
   field2: 'value2',
   field3: 'value3',
   ...
   fieldn:'valuen'
 }
}
```
  然后提交数据的时候这样：
```
 var param = {
   backend_field1: this.field1,
   backend_field2: this.field2,
   backend_field3: this.field3,
   ...
   backend_fieldn: this.fieldn
 }
 this.post(url,param)
```
  如你看到的，每次提交接口，都要去构造参数，还很容易遗漏，我们不妨这样：先去接口文档里面看一下后端需要的字段名称，然后
```
    <input>
    <input>
    <input>
    ....
    <input>
```
```
 
  "javascript
  data () {
   return {
     queryParam:{
       backend_field1: 'value1'
       backend_field2: 'value2'
       backend_field3: 'value3'
       ...
       backend_fieldn: 'valuen'
     }
   }
  }
  "
  然后提交数据的时候这样：
  "javascript
   this.post(url,this.queryParam)
  "
```
  是的，这样做也是有局限性的，比如你一个数据在 2 个地方共用，比如前端组件绑定的是一个数组，你需要提交给后端的是 2 个字符串（例：element ui 的时间控件）,不过部分特殊问题稍微处理一下，也比重新构建一个参数简单不是吗？
6. data 里面的数据多的时候，给每个数据加一个备注，会让你后期往回看的时候很清晰
  
  续上一点，data 里面有很多数据的时候，可能你写的时候是挺清晰的，毕竟都是你自己写的东西，可是过了十天半个月，或者别人看你的代码，相信我，不管是你自己，还是别人，都是一头雾水（记忆力超出常人的除外），所以我们不妨给每个数据后面加一个备注
```
data () {
 return {
   field1: 'value1',  // 控制xxx显示
   field2: 'value2',  // 页面加载状态
   field3: [],        // 用户列表
   ...
   fieldn: 'valuen'   // XXXXXXXX
 }
}
```
7. 逻辑复杂的内容，尽量拆成组件
  
  假设我们有一个这样的场景：
```
<p>
   </p><p>姓名：{{user1.name}}</p>
   <p>性别：{{user1.sex}}</p>
   <p>年龄：{{user1.age}}</p>
   ...此处省略999个字段...
   <p>他隔壁邻居的阿姨家小狗的名字：{{user1.petName}}</p>


<p>
    </p><p>姓名：{{user2.name}}</p>
    <p>性别：{{user2.sex}}</p>
    <p>年龄：{{user2.age}}</p>
    ...此处省略999个字段...
    <p>他隔壁邻居的阿姨家小狗的名字：{{user2.petName}}</p>
```
  这种情况，我们不妨把[用户]的代码，提取到一个组件里面：
  假设如下代码，在 comUserInfo.vue
```
<template>
 <p>
   </p>
<p>姓名：{{user.name}}</p>
   <p>性别：{{user.sex}}</p>
   <p>年龄：{{user.age}}</p>
   ...此处省略999个字段...
   <p>他隔壁邻居的阿姨家小狗的名字：{{user.petName}}</p>
 
</template>

<script>
export  default {
 props:{
   user:{
     type:Object,
     default: () => {}
   }
 }
}
</script>
```
  然后原来的页面可以改成这样(省略掉导入和注册组件，假设注册的名字是 comUserInfo )：
```
<comuserinfo></comuserinfo>
<comuserinfo></comuserinfo>
```
  这样是不是清晰很多？不用看注释，都能猜的出来，这是2个用户信息模块，这样做，还有一个好处就是出现错误的时候，你可以更容易的定位到错误的位置。
8. 如果你只在子组件里面改变父组件的一个值，不妨试试 $emit('input') ,会直接改变 v-model
  
  我们正常的父子组件通信是父组件通过 props 传给子组件，子组件通过 this.$emit('eventName',value) 通知父组件绑定在 @eventName 上的方法来做相应的处理。
  但是这边有个特例，vue 默认会监听组件的 input 事件，而且会把子组件里面传出来的值，赋给当前绑定到 v-model 上的值
  
  正常用法 - 父组件
```
<script>
  export default {
    data () {
      return {
        param:&#39;xxxxxx&#39;
      }
    },
    methods:{
      dataChangeHandler (newParam) {
        this.param = newParam
      }
    }
  }
</script>
```
  正常用法 - 子组件
```
<script>
  export default {
    methods:{
      updateData (newParam) {
        this.$emit(&#39;dataChange&#39;,newParam)
      }
    }
  }
</script>
```
  利用默认 input 事件 - 父组件
  利用默认 input 事件 - 子组件
```
<script>
  export default {
    methods:{
      updateData (newParam) {
        this.$emit(&#39;input&#39;,newParam)
      }
    }
  }
</script>
```
  这样，我们就能省掉父组件上的一列席处理代码，vue 会自动帮你处理好
  
  tip: 这种方法只适用于改变单个值的情况，且子组件对父组件只需简单的传值，不需要其他附加操作(如更新列表)的情况。
  
  补充一个 this.$emit('update:fidldName',value) 方法 (感谢掘金用户 @日月为易。 指出)
  具体用法如下:
  
  父组件
```
    <subcomponent></subcomponent>
```
  子组件
```
<script>
  export default {
    methods:{
      updateData1 (newValue) {
        this.$emit(&#39;update:field1&#39;,newValue)
      },
      updateData2 (newValue) {
        this.$emit(&#39;update:field2&#39;,newValue)
      }
    }
  }
</script>
```
  该方法,个人认为比较适用于要更新的数据不能绑定在 v-model 的情况下,或者要双向通信的数据大于 1 个(1个也可以用,但我个人更推荐 input 的方式, 看个人喜好吧),但又不会很多的情况下.
9. conponents放在 Vue options 的最上面
  
  不知道大家有没有这样的经历: 导入组件，然后在也页面中使用，好的，报错了，为啥？忘记注册组件了，为什么会经常忘记注册组件呢？因为正常的一个 vue 实例的结构大概是这样的：
```
import xxx form 'xxx/xxx'
export default {
  name: 'component-name',
  data () {
    return {
      // ...根据业务逻辑的复杂程度，这里省略若干行
    }
  },
  computed: {
    // ...根据业务逻辑的复杂程度，这里省略若干行
  },
  created () {
    // ...根据业务逻辑的复杂程度，这里省略若干行
  },
  mounted () {
    // ...根据业务逻辑的复杂程度，这里省略若干行
  },
  methods () {
    // ...根据业务逻辑的复杂程度，这里省略若干行
  },
}
```
  我不知道大家正常是把 components 属性放在哪个位置，反正我之前是放在最底下，结果就是导致经常犯上述错误。
  
  后面我把 components 调到第一个去了
```
import xxx form 'xxx/xxx'
export default {
  components: {
    xxx
  },
  // 省略其他代码
}
```
  从此以后，妈妈再也不用担心我忘记注册组件了，导入和注册都在同一个位置，想忘记都难。
10. 大部分情况下，生命周期里面，不要有太多行代码，可以封装成方法，再调用
  
  看过很多代码，包括我自己之前的，在生命周期里面洋洋洒洒的写了一两百行的代码，如：把页面加载的时候，该做的事，全部写在 created 里面，导致整个代码难以阅读，完全不知道你在页面加载的时候，做了些什么，
  这个时候，我们不妨把那些逻辑封装成方法，然后在生命周期里面直接调用：
```
created () {
  // 获取用户信息
  this.getUserInfo()
  // 获取系统信息
  this.getSystemInfo()
  // 获取配置
  this.getConfigInfo()
},
methods:{
  // 获取用户信息
  getUserInfo () {...},
  // 获取系统信息
  getSystemInfo () {...},
  // 获取配置
  getConfigInfo () {...},
}
```
  这样是不是一眼就能看的出，你在页面加载的时候做了些什么？
  
  tip: 这个应该算是一个约定俗成的规范吧，只是觉得看的比较多这样写的，加上我自己初学的时候，也这么做了，所以写出来，希望新入坑的同学能避免这个问题
11. 少用 watch，如果你觉得你好多地方都需要用到 watch，那十有八九是你对 vue 的 API 还不够了解
  
  vue 本身就是一个数据驱动的框架，数据的变动，能实时反馈到视图上去，如果你想要根据数据来控制试图，正常情况一下配合 computed 服用就能解决大部分问题了，而视图上的变动，我们一般可以通过监听 input change 等事件，达到实时监听的目的，
  所以很少有需求使用到 watch 的时候,至少我最近到的十来个项目里面，是没有用过 watch 当然，并不是说 watch 是肯定没用处, vue 提供这个api,肯定是有他的道理，也有部分需求是真的需要用到的，只是我觉得应该很少用到才对，如果你觉得到处都得用到的话，
  那么我觉得 十有八九你应该多去熟悉一下 computed 和 vue 的其他 api 了
相关推荐：

Vue登录注册的实现方法（代码解析）
ES6中全新的数字方法总结（必看）

위 내용은 종합 요약: vue 사용 중 발생하는 문제 해결 요약(꼭 읽어야 함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

Dreamweaver Mac版

시각적 웹 개발 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.