Differences between Vue and React?

welcome back to vue.js for react devs building on top of the part 1 course we're going to continue our uj's journey with this app but this time we'll discuss more about the differences between vue.js and react.js as a high level preview these are the topics we'll go through computed property props two-way data binding and lifecycle hooks perhaps will be explained in several different lessons because UJS has a very different way of handling callback props and render props in their gold custom events and Slot respectively but first let's talk about the most fundamental difference between View and react and that is the way the reactive State changes as you can see view is using ref while react is using use State at first you might think these functions are basically the same thing but just with different names and you'll be right they're practically the same thing but in terms of runtime execution they're very different as you know the code inside a react component will get executed again again and again as part of the reactive process but on the other hand the vue.js script block only runs once and that's because view JS was implemented differently with the Observer pattern the vue.js state is basically an object that can be subscribed to and a subscriber will get notified whenever a state change occurs for example the template of a component is an implicit subscriber of the state in that same component that's why when a state is changed the template will be executed again and that's why the script block doesn't need to be run again and again in the next lesson we'll see how this Observer pattern applies to creating computed properties [Music] foreign lesson we talked about that the template is an implicit subscriber of the component state but what about explicit subscriber an example of that would be a computed property we're going to apply that in our app first create a new state for the brand ref let's say you want to display both the brand name and the product name in The Heading we can simply combine them together like this it will show up on the page like this but there's a cleaner way to do this with a computed property let's create one called title to compute the function takes a callback as an argument inside a function we're returning a new string based off the values of app brand and product this will become the value of a computed property and from now on whenever brand or product is changed the value of the title will get recalculated automatically since we're using the computed function we have to import it from View and finally in the template we have the render title as you can see accessing the value of title in the template doesn't require using the value property but if you're accessing the value in the script you will have to use dot value just like you would with the ref object in a browser make sure that it still shows the same title without new knowledge of computer property let's improve the varying selection process currently we're displaying the image using the image ref and we're updating the image using the update image callback we're going to improve The Code by turning the ref into a computed property and it will be based on the variance data and a new selected variant ref and we want the image property once again we're using the variance data with a new ref with selected variant wrap is for keeping track of the index of the currently selected variant let's create it right now this will be a number ref let's move this down here and now when we update the image in update image we should be updating the new selected variant graph instead so let's change your function name to update variant instead of changing the value of the image we're changing the value of the selected value in here and we're setting it to the index that we pass into this function this new index parameter is a number that represents the choice of the variant that the user chooses with the mouse over event it doesn't get provided to us automatically so we have to go back to where the V4 directive is used and use expanded syntax to get the index for each iteration and with this index variable we can pass it to the update variant function on Mouse over foreign event is triggered the update variant function will be called with the index and once the selected variant ref gets updated the image computed property will be updated automatically in a browser make sure that the variant selection feature still works this new way of updating the variant image is more scalable now we can easily make other information Dynamic such as the in-stock or out-of-stack status foreign with the static value fault an amount of event doesn't affect it at all we can easily refactor and stack into your computed property just like image and you will get updated based on the selected variant graph but first we have to add a new quantity property to each variant we'll use the quantity to determine the in stock status of each value now we can remove in stock as a ref and recreate it as another computed property we just have to use variants with selected variant as the index along with the new quantity property so if the quantity is greater than zero instead will be true otherwise it will be false now both image and in stack are computed properties and we don't have to worry about how to update them we just need to update the selected variant graph and both of these computed properties will be updated automatically in a browser we're able to switch between two different variants and both the image and in stock status will be updated accordingly the computed function is part of the view 3 composition API so you can also use it inside a composable we'll see how to do that in a future lesson the composition API also provides a few other useful functions for reacting the state changes such as watch and watch effect sometimes you will want to be notified of the state change but not necessarily to create a computed property based on it the watch function can help you to run a callback whenever a particular state is changed there's no need to return anything from this callback function watch effect is similar to watch but you don't have to specify what to watch all the subscribable objects that appear inside the Callback will be subscribed to automatically this is useful for subscribing to multiple States and you don't have to manually list out all of them but different from watch watch effect will run the Callback once from a start before any state change on the other hand watch will only run the Callback when the source is changed in the next two lessons we'll talk about how components communicate with each other via props and custom events [Music]

Channel: Vue Mastery

Views: 20,586

Keywords: vue js, vue, vue js tutorial, vue 3, vuejs, vue js tutorial for beginners, vue 3 tutorial, vue js 3, vuejs tutorial, vue tutorial, vue course, react, react js, react js tutorial, vue vs react, vue for react developers, vue react, vue react angular, react vs vue, react vs angular vs vue 2023, react vs vue 2023, vue vs react 2023, react or vue, vue or react, vue js vs react

Id: N4T-78LOoN8

Length: 8min 9sec (489 seconds)

Published: Mon Dec 19 2022