종합 요약: 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를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는