๐Ÿ’ก[Vue.js] Computed vs Methods vs watch

sujinยท2021๋…„ 11์›” 10์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
3/14
post-thumbnail

โœ… computed

๊ณ„์‚ฐํ•ด์•ผํ•˜๋Š” ๋ชฉํ‘œ ๋ฐ์ดํ„ฐ๋ฅผ ์ •์˜ํ•˜๋Š” ์„ ์–ธํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์œผ๋กœ, ์ €์žฅ๋œ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜(์บ์‹ฑ)ํ•จ์œผ๋กœ ์ข…์† ๋Œ€์ƒ์˜ ๋ณ€๊ฒฝ์ด ์ผ์–ด๋‚˜๊ธฐ ์ „๊นŒ์ง€ ํ˜ธ์ถœ ๋˜์ง€ ์•Š๋Š”๋‹ค.

์˜ˆ์‹œ

<div id="app">
  <p>{{ reversedMessage }}</p>
</div>

<script>
	new Vue({
  		el:'#app', 
  		data : {
  			message: 'hello Vue!'
  		},
  		computed : {
  			reversedMessage: function(){
  				return this.message.split('').reverse().join('');
  			}
  		}
  	});
</script>

๊ฒฐ๊ณผ

  • data ์†์„ฑ ๊ฐ’์˜ ๋ณ€ํ™”์— ๋”ฐ๋ผ ์ž๋™์œผ๋กœ ๋‹ค์‹œ ์—ฐ์‚ฐํ•œ๋‹ค.
  • reversedMessage()๊ฐ€ ๋ฏธ๋ฆฌ ์—ฐ์‚ฐํ•œ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๊ฐ€ ํ™”๋ฉด์— ๊ฒฐ๊ณผ๋งŒ ํ‘œ์‹œํ•œ๋‹ค.

โœ… methods

๋ Œ๋”๋ง์ด ์ผ์–ด๋‚  ๋•Œ๋งˆ๋‹ค ํ•ญ์ƒ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.

์˜ˆ์‹œ

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMsg">๋ฌธ์ž์—ด ์—ญ์ˆœ</button>
</div>

<script>
  new Vue({ 
      el:'#app',
      data: {
          message:'Hello Vue!'
      },
      methods: {
          reverseMsg: function(){
              this.message =  this.message.split('').reverse().join('');
              return this.message;
          }
      }
  })  
</script>

๊ฒฐ๊ณผ

  • ์•ž์—์„œ ์‚ดํŽด๋ณธ computed ์†์„ฑ์œผ๋กœ ๋ฌธ์ž์—ด ์ˆœ์„œ๋ฅผ ๋ฐ”๊พผ ์ฝ”๋“œ์™€ ๋™์ผํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.
  • ์ฐจ์ด์ ์€ methods ์†์„ฑ์€ [๋ฌธ์ž์—ด ์—ญ์ˆœ] ๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ๋งŒ ์ˆœ์„œ๋ฅผ ์—ญ์œผ๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค.

๐Ÿ“computed์™€ methods์˜ ์ฐจ์ด์ 

  • computed ์†์„ฑ์€ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๋Š” ํ•œ ์ด์ „์˜ ๊ณ„์‚ฐ ๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๊ฐ€, ํ•„์š”ํ•  ๋•Œ ๋ฐ”๋กœ ๋ฐ˜ํ™˜ํ•ด ์ค€๋‹ค.
  • methods ์†์„ฑ์€ ์ˆ˜ํ–‰ํ•  ๋•Œ๋งˆ๋‹ค ์—ฐ์‚ฐ์„ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ณ„๋„์˜ ์บ์‹ฑ์„ ํ•˜์ง€ ์•Š๋Š”๋‹ค.
  • ๋”ฐ๋ผ์„œ, ๋ณต์žกํ•œ ์—ฐ์‚ฐ์„ ๋ฐ˜๋ณต ์ˆ˜ํ–‰ํ•˜๋Š” ํ™”๋ฉด์—์„œ๋Š” computed ์†์„ฑ์„ ์ด์šฉํ•˜๋Š” ๊ฒƒ์ด ํšจ์œจ์ ์ด๋‹ค.

โœ… watch

๋ฐ์ดํ„ฐ๊ฐ€ ๋ฐ”๋€Œ๋ฉด ํŠน์ • ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋ ค๋Š” ๋ช…๋ นํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹ ์ด๋‹ค.

์˜ˆ์‹œ

<div id="app">
    <input v-model="message">
</div>

<script>
    new Vue({ 
        el:'#app',
        data: {
            message: 'Hello Vue!'
        },
        watch: {
            message: function(data){
                console.log("message์˜ ๊ฐ’์ด ๋ฐ”๋€๋‹ˆ๋‹ค :", data);
            }
        }
    });
</script>

๊ฒฐ๊ณผ

  • ๋ฐ์ดํ„ฐ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ•˜์—ฌ ์ž๋™์œผ๋กœ ํŠน์ • ๋กœ์ง์„ ์ˆ˜ํ–‰ํ•œ๋‹ค.
  • input box์˜ ์ž…๋ ฅ ๊ฐ’์— ๋ณ€ํ™”๊ฐ€ ์žˆ์„ ๋•Œ๋งˆ๋‹ค watch์†์„ฑ์— ๋ณ€ํ™”๋œ ๊ฐ’์„ ๋กœ๊ทธ์— ์ถœ๋ ฅํ•œ๋‹ค.
  • ๊ฐ„๋‹จํ•œ ์—ฐ์‚ฐ์— ์ ํ•ฉํ•œ computed์†์„ฑ๊ณผ ๋‹ฌ๋ฆฌ, watch์†์„ฑ์€ ๋ฐ์ดํ„ฐ ํ˜ธ์ถœ๊ณผ ๊ฐ™์ด ์‹œ๊ฐ„์ด ์ƒ๋Œ€์ ์œผ๋กœ ๋” ๋งŽ์ด ์†Œ๋ชจ๋˜๋Š” ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ์— ์ ํ•ฉํ•˜๋‹ค.
profile
๊ฐœ๋ฐœ๋Œ•๋ฐœ

0๊ฐœ์˜ ๋Œ“๊ธ€